video.js 大小以适合 div

Posted 2023-05-07

【中文标题】video.js 大小以适合 div

【英文标题】：video.js size to fit div

【发布时间】：2013-08-12 17:32:00

【问题描述】：

我在div 中有一个video，宽度为40%。在 html 中，width="100%" height="auto" 使视频消失。以像素为单位设置特定大小不适合div。将 html 留空会使视频大小错误，并且两侧有黑条。

我已经尝试过大多数其他帖子中的建议，但似乎无法让它发挥作用。

<div id="box"><video id="trialvid" class="video-js vjs-default-skin"
  controls preload="auto"   poster="images/reelthumbnail.jpg"
  data-setup='"example_option":true'>
 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
 <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
 <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
</div>

【问题讨论】：

你试过了吗：$(this).css( "width":""+$(this).closest('div').width()+"px", "height" :""+$(this).closest('div').height()+"px" );视频加载时在 Jquery 中？顺便问一下，你能显示你的 HTML 吗？

请将代码放入问题中，以便人们了解您在写什么。

【参考方案1】：

在 videojs 的第 5 版中，您可以在视频对象上使用 vjs-16-9 vjs-4-3 类，

<video class="video-js vjs-default-skin vjs-16-9" ...>
...
</video>

或使用fluid 选项

<video class="video-js vjs-default-skin" data-setup='"fluid": true' ...>
...
</video>

来源：https://coolestguidesontheplanet.com/videodrome/videojs/

【讨论】：

这正是我想要的（流体选项）。谢谢！

流畅的作品，但引号。您不能在 JSON 中使用 ' （单引号），只能使用 " （双引号）。这必须完全类似：'"fluid": true'

您现在还可以在视频元素中使用vjs-fluid 选项，而不会产生混乱

【参考方案2】：

你必须使用丑陋的 !important 来覆盖视频的默认绝对定位：

.video-js 
    position: relative !important;
    width: 100% !important;
    height: auto !important;

完成后，海报图像将显示在视频之后，而不是在其上方，因此您必须使用以下方法修复它：

.vjs-poster 
    position: absolute !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

请注意，它必须与您希望它良好显示的视频具有相同的比例。

【讨论】：

像魅力一样工作，我只需要将它不仅添加到 .video-js 中，还添加到 .video-js .vjs-tech ...问候 Stefan

如何使用Player#width() 或Player#height() 如下所示：docs.videojs.com/tutorial-skins.html？

您可以添加height: 100vh !important; 使其适合整个屏幕，然后将其嵌入到 iframe 中。

【参考方案3】：

在视频标签的 HTML 中将宽度和高度设置为自动。然后使用 CSS 将视频 ID 的宽度/高度设置为 100%。

将 width 和 height 属性设置为 auto 使播放器像 div 一样工作，默认情况下没有尺寸。

【讨论】：

还是没有运气。播放器不会显示海报图像，当我点击播放按钮时，视频播放时完全没有图像，只有音频和播放器控制栏。

vjs.zencdn.net/4.1/video-js.css" rel="stylesheet ">

【参考方案4】：

这是我用来解决此问题的方法。首先删除视频对象上的任何大小声明。

将包含元素的位置属性设置为相对。

.video_container 
  position: relative;

将海报图片添加到包含元素，并将其宽度设置为 100%，将高度设置为自动。这将强制 div 将自身垂直调整为海报图像的高度（如果你做得对，它应该与你的视频大小相同）

.video_container img.poster 
  width: 100%;
  height: auto;
  position: relative;
  z-index: 10;

现在将 .video-js 的位置设置为绝对，并将其高度和宽度设置为 100%。这将导致 .video-js 将自身缩放到海报图像的高度和宽度，海报图像将自身适当地缩放到包含的 div。

.video_container .video-js 
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 110;

如果您使用 Zencoder 等服务从视频中动态获取缩略图以生成缩略图并允许用户上传视频，这将确保您的视频始终正确缩放，因为您可以从图像中获取按比例缩放的尺寸垂直。

【参考方案5】：

  video[poster]
    object-fit: fill;

为我做的

【参考方案6】：

刚刚发现这个： http://jsbin.com/idinaf/4/edit 从这里http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/

希望这对某人有所帮助。

编辑：IMO 你应该用一些简单的 CSS 试试这个：

width: 100% !important;
height: auto !important;