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

Answer 2

您可以将其添加到数据设置中：

data-setup='{"fluid": true}'

或根据您的视频方面/比例将以下类添加到执行相同操作的容器中：

vjs-16-9

或

vjs-4-3

此codepen是另一种方法

https://codepen.io/dotdreaming/pen/CnLeD

Answer 3

您可以轻松更改控制栏的CSS以使播放器响应。一种方法是使用媒体查询。我是通过这种方式做到的，并且有效。

Answer 4

以下是VideoJS建议的完整代码，其他文件格式为

  Below is the full code suggested by VideoJS with the other file formats declared

<video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>

video.js响应不起作用

4 个答案: