Question

如何在fancybox中制作一个html5视频响应已经响应？这是我到目前为止的代码：

<a class="preview" href="#inline123">
    <img class="item" src="/thumbs/thumb.jpg" width="{_file.IMAGE_W}" height="{_file.IMAGE_H}">
</a>

<div style="display: none;">
    <div id="inline123">
        <video class="video-js vjs-default-skin vid" style="width: 100% !important; height: auto !important;" controls poster="/thumbs/thumb.jpg" preload="none" id="123">
            <source src="/video/video.mp4" type="video/mp4">
            <source src="/video/video.webm" type="video/webm">
        </video>
        <script>
        // <![CDATA[
        $(".preview").fancybox({
            'beforeShow': function(){
                $(window).on({
                    'resize.fancybox' : function(){
                        $.fancybox.update();
                    }
                });
             },
             'afterClose': function(){
                  $(window).off('resize.fancybox');
             },
             width      : '640',
             height     : '360',
             fitToView  : true,
             closeClick : false,
             openEffect : 'none',
             closeEffect: 'none',
             closeBtn   : 'true',
             scrolling  : 'no',
        });
        // ]]>
    </div>
</div>

Answer 1

好的，所以它最终需要看起来像这样的视频标签

<video class="video-js vjs-default-skin vid" controls poster="/image/poster.jpg" preload="none" id="123" width="auto" height="auto" style="width:100% !important; height:auto !important">

width =“auto”height =“auto”是修复videojs问题的原因。我没有意识到 auto 是一个有效的值。根据这个http://coolestguidesontheplanet.com/videodrome/videojs/，它还可以使用 IE9

Answer 2

您需要将视频设置在div中，并为视频提供width: 100%和height: auto。另外，使用必要的宽度和高度尺寸设置保持div。

查看我的小提琴：JSFiddle

Answer 3

这个答案从来没有帮助过我，经过几个小时的尝试和运气，我找到了一个很好的jquery解决方案，我创建了一个函数来处理：

//computing player size 
function computePlayerSize(){

    var playerParent= $(".video-js").parent();

    var parentWidth = playerParent.width();

    var parentHeight = playerParent.height();

    var aspectRatio = 9/16; // you can change AR to meet your requirement

    var playerHeight = parentWidth*aspectRatio;

    var playerWidth = parentWidth;


    return {"width": playerWidth ,"height" : playerHeight}
}

标记必须位于包含css：

的包装中

.playerWrapper{
display:inline-block;
padding:0;
}

接下来让init videojs

//attach the computePlayerSize() to get the first width and height to match the player wrapper
var videoJsParam = $.extend(computePlayerSize(),{
techOrder: ["html5","flash"]
});


//snapShopPlayer
videojs("snapShotVideo",videoJsParam,function(){

snapShotPlayer = this;

window.playerInstance = snapShotPlayer;

//if resized ,then recompute the player size
$(window).on("resize",function(){

//if resized , then lets get the new width and height 
newPlayerSize = computePlayerSize();

window.playerInstance.width(newPlayerSize.width).height(newPlayerSize.height);

});//end if resized


});

不是最好的，但像魅力一样

如何在fancybox和videoJS中制作响应式html5视频

3 个答案: