video.js 响应不工作

Posted 2023-05-08

【中文标题】video.js 响应不工作

【英文标题】：video.js responsive not working

【发布时间】：2014-08-09 00:57:56

【问题描述】：

我使用 video.js 已经有一段时间了，一直在寻找响应式解决方案。我看到 4.6 声称是这样，但无法开始工作。而且我在文档中找不到任何关于使其具有响应性的内容。我基本上只需要它保持 100% 的容器并保持其纵横比。如果我离开宽度/高度，它默认很小。 100% 可以在宽度上工作，但不知道在高度上放什么。尝试在video标签的id上使用CSS，没用。

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

如果它记录在某处，链接会有所帮助，或者任何关于其他人如何使 video.js 4.6 响应的想法。

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

【参考方案1】：

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

data-setup='"fluid": true'

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

vjs-16-9

或

vjs-4-3

这个codepen是另一种方法

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

【讨论】：

“流体”：我一生都在哪里？这正是我一直在寻找的，谢谢！

【参考方案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 将自动将其自身调整为父容器的 100%，同时保持高度与宽度的比例。

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

【讨论】：

请注意，56.25% 是 (9/16)*100。所以这个值假设 16x9 是您的高清纵横比，而 75% 将基于 (3/4)*100。如果您的视频使用不同的尺寸，只需使用 (height/width)*100。

这很有帮助，谢谢。我最后也添加了这个：window.VIDEOJS_NO_DYNAMIC_STYLE = true

【参考方案3】：

您可以轻松更改控制栏的 css 以使播放器响应。 一种方法是使用媒体查询。我就是这样做的，效果很好。

【参考方案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"  
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='"example_option":true'>

【讨论】：

我添加了我在任何地方都没有见过的 example_option true。它有点工作。当我调整浏览器窗口时，它会下降几次。但是在 iPhone 上查看时，它不会格式化为该大小，从而导致页面的其余部分超出其布局。我通过 css 寻找可以调整的地方，但找不到。有什么想法吗？