加载 VideoJS 流体播放器时最小化跳跃的最佳方法是什么？

Question

我正在使用VideoJS 的 v5.5.3，并且我正在使用此 VideoJS blog post 中详述的相当令人愉快的响应选项（文档有点不完整：目前这篇博文似乎是唯一的地方选项的描述）。

我的视频标签标记如下所示：

<div class="video-js-container">
    <video id="1234" class="video-js vjs-default-skin vjs-big-play-centered"
        controls
        preload="metadata"
        poster="http://vjs.zencdn.net/v/oceans.png"
        data-setup='{"fluid":true}'>
        <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
    </video>
</div>

这会像宣传的那样流畅地调整视频大小。但我发现当页面加载时，它会随着 HTML5 视频标签的加载而经历各种扭曲，然后是 VideoJS 版本，然后调整大小。页面跳动很多。我想限制初始尺寸，或者限制它们并隐藏播放器，直到加载和调整大小的过程完成。谁能建议最好的方法？是否有一个 VideoJS 类来表示播放器已加载、渲染和调整大小？

Answer 1

强制静态尺寸阻止了我进一步调整大小：

.video-js {
    width:850px;
    height:477px;
}

Answer 2

我发现跳来跳去根本不是 VideoJS 的错 - 我有一个预先存在的 CSS 规则来为视频提供流畅的大小：

video {
    width: 100%;
    height: auto !important;
}

这导致 VideoJS 播放器在加载时具有很大的高度，在 JS 库生效并使用 .video-js div 包装 video 元素之前。我发现仅仅从规则中排除.video-js 就能让玩家很好地加载：

video:not(.video-js) {
    width: 100%;
    height: auto !important;
}