video.js响应式未生效

Question

我已经使用video.js一段时间了，正在寻找一个响应式解决方案。我看到4.6声称可以实现，但无法运行。在文档中没有找到关于如何使其响应式的内容。我基本上只需要它保持在容器的100％并保持其纵横比即可。如果我不设置宽度/高度，则默认为小尺寸。宽度为100％可以工作，但不确定高度应该设置什么。尝试在视频标签的id上使用CSS，但未成功。

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

如果有文档记录，链接会很有帮助，或者任何其他人如何使video.js 4.6响应式的想法。

此外，加载动画未显示。

- astonishedman

Answer 1

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

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

或者，根据您的视频宽高比，将以下类添加到执行相同操作的容器中：

vjs-16-9

或者

vjs-4-3

这个 Codepen 是另一种方法。

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

- user3893613

---

"fluid": true一直在哪里？这正是我一直在寻找的，谢谢！ - Woody

Answer 2

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

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

<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会自动调整大小以填满父容器，同时保持高度与宽度的比例。

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

- tastybytes

---

请注意，56.25％是（9/16）* 100。因此，此值假定16x9是您的高清宽高比，而75％将基于（3/4）* 100。如果您的视频使用不同的尺寸，请使用（高度/宽度）* 100。 - braks

这非常有帮助，谢谢。我还添加了以下内容： window.VIDEOJS_NO_DYNAMIC_STYLE = true - Jordan

Answer 3

您可以轻松更改控制栏的 CSS 以使播放器响应。 一种方法是使用媒体查询。我就是这样做的，而且它起作用了。

- Hussnain Cheema

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}'>

- Lyle

---

我添加了example_option true，这是我在任何地方都没有看到过的。它有点有效果。当我调整浏览器窗口大小时，它会步进几次。但在 iPhone 上查看时，它不会格式化为该大小，导致页面的其余部分脱离布局。我查看了 CSS，想调整一下，但找不到位置。有什么想法吗？ - astonishedman