html5-video - video.js 响应不工作

Question

我已经使用 video.js 一段时间了，正在寻找响应式解决方案。我看到 4.6 声称是这样，但无法开始工作。我在文档中找不到任何关于使其响应的内容。我基本上只需要它保持在容器的 100% 并保持其纵横比。如果我关闭宽度/高度，它默认很小。 100% 将适用于宽度，但不确定高度该放什么。试图在视频标签的 id 上使用 CSS，没有奏效。

daverupert.com 方法适用于旧版本的 video.js，但不适用于 4.6。

如果它被记录在某个地方，那么链接或有关其他人如何使 video.js 4.6 响应的任何想法都会有所帮助。

此外，加载动画没有显示。

Answer 1

这是我用于所有响应式播放器的代码。

首先添加一个响应式包装器

<div class="video-js-responsive-container vjs-hd">
    <video .... standard videojs code ... >
        ... sources ...
    </video>
</div>

我使用 vjs-hd 和 vjs-sd 来区分 16:9 和 4:3

然后为它设置类和 css

.video-js-responsive-container.vjs-hd {
    padding-top: 56.25%;
}
.video-js-responsive-container.vjs-sd {
    padding-top: 75%;
}
.video-js-responsive-container {
    width: 100%;
    position: relative;
}
.video-js-responsive-container .video-js {
    height: 100% !important; 
    width: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}

我知道使用 !important不受欢迎，但在覆盖其他 css 类时它是可靠的。

包装类 video-js-resonsive-container将自动将其大小调整为父容器的 100%，同时保持高度与宽度的比例。

改编自: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php