fancybox显示全屏后的中间状态

Question

我写了下面的代码：

<div class="video-box" id="video-player-div" style="display: none">
    <video id="video-player" class="video-js vjs-default-skin" controls
           preload="auto" width="640" height="264"
           poster="http://www.ephotobay.com/image/birds-wallpaper-8-chai3721post.jpg"
           data-setup="{}"
           src="http://vjs.zencdn.net/v/oceans.mp4">

        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that
            <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
    </video>

<a id="btnForm" href="#video-player-div" title="" class="fancy_image"><img src="/getVideoIcon.png" alt=""></a>

  $("#btnForm").fancybox();

当我点击全屏并切换它时，我看到中间状态（坏）：

然后这个（好）

我不喜欢。

请指教如何修复它！

P.S.

Jsfiddle demo

Answer 1

我看到的第一个问题是您将视频作为（隐藏）内联内容放置。大多数动态内联或多媒体内容，如音频、视频和 iframe，会导致其他问题，如 audio/video 在 fancybox 关闭后仍在后台播放等。 . 不提它们也可能会影响您的页面加载和性能。

我不建议您使用静态 HTML 内联内容，而是采用另一种方法并将 HTML 内容构建为即时显示在 fancybox 中。

首先，直接在 link 的 href 中定位您的 MP4 媒体文件，如：

<a id="btnForm" href="http://vjs.zencdn.net/v/oceans.mp4" title="" class="fancy_image"><img src="/getVideoIcon.png" alt=""></a>

注意，使用这种方法，您可以对多个视频使用不同的 link（使用类而不是选择器中的 ID）并且您只需要设置相应的 href 而无需为每个新视频创建新的隐藏内联内容。

然后，在您的 fancybox 自定义初始化脚本中，使用回调来：

预构建 <video> 内容并从 link (beforeLoad)

href

初始化video.js (beforeShow)
完成后删除 video.js 实例 (afterClose)。

代码如下：

var player = {}; // global object (so we don't have to initialize several variables)
jQuery(document).ready(function ($) {
    $("#btnForm").fancybox({
        fitToView : false, // keeps fixed video dimensions regardless screen size
        width : 640, // matches size in <video> tag
        height : 264,
        type : "html", // this is important
        autoSize: false, // fixes intermediate state
        beforeLoad : function () {
            // create a random ID :
            player.id = "video-player" + new Date().getTime();
            // pre-build HTML video content :
            player.content =
                '<video id="' + player.id + '" src="' + this.href + '" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="http://www.ephotobay.com/image/birds-wallpaper-8-chai3721post.jpg" data-setup="{}">' +
                '<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>' +
                '</video>';
            // load video.js flash fallback :
            videojs.options.flash.swf = "{path}/video-js.swf";
            // set fancybox content :
            this.content = player.content;
        },
        beforeShow : function () {
            player.js = videojs(player.id); // initialize video.js
        },
        afterClose : function () {
            $(player.js).remove(); // remove video.js instances
        }
    });
}); // ready

注意我们需要fitToView : false和autoSize: false的组合来消除"intermediate state"，但是重要的是设置尺寸以避免意外结果。

并查看 DEMO（随意探索源代码）

Answer 2

根据您的问题，我了解到视频的对齐方式被拉伸了。问题是因为您为视频元素设置的 custom width('640') and height('264')。所以 fancybox 将 space 的大部分分配给视频元素。您需要删除自定义宽度和高度，然后添加一个 style= "width:98%;height:auto" 来解决问题。

勾选JsFiddle

fancybox显示全屏后的中间状态

fancybox shows intermediate state after turn of full screen

html

javascript

rendering

fancybox

video.js