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

Question

我正在使用 VideoJS, and I'm using the rather delightful responsive option detailed in this VideoJS blog post 的 v5.5.3（文档有点不完整：目前这个博客 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 class 表示播放器已加载、渲染和调整大小？

Answer 1

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

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

Answer 2

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

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

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

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

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

What's the best way to minimise the jumps when VideoJS fluid player is loading?

html

javascript

video

html5-video

video.js