Video JS - 海报图片封面/包含

Posted 2023-05-07

【中文标题】Video JS - 海报图片封面/包含

【英文标题】：Video JS - poster image cover/contain

【发布时间】：2013-08-16 07:14:35

【问题描述】：

VideoJS 4 使用的 CSS 行为与我所看到的海报图像不同。我已经将 background-size CSS 更改为“cover”而不是“contain”，这意味着即使我的图像比例错误，图像也会填满海报 div。但是，由于某种原因，当您单击海报开始播放视频时，在加载视频时，海报图像似乎回到了“包含”状态。是否正在其他地方进行此更改？

网站是http://jamhouse.com.au/。

提前致谢！

【参考方案1】：

当您将海报指定为视频元素的属性时，您实际上会得到两张海报图片 - 一张在视频元素本身中，另一张由 video.js 创建为覆盖视频元素的 div。您的 CSS 仅适用于 .vjs-poster div。播放视频时，video.js 海报 div 被隐藏，您可以短暂看到视频元素自己不同比例的海报。

如果不使用海报属性，而是在 data-setup 中将其指定为一个选项，则视频元素本身不会创建海报图像，但您仍将拥有可设置样式的 video.js 海报 div。

<video id="showcase" class="video-js vjs-default-skin"
  controls="controls" preload="none"  
  data-setup='"poster":"http://jamhouse.com.au/media/video/orchlapse.jpg"'>

示例：http://jsfiddle.net/tjFyC/

【讨论】：

试过上面的，没有背景可见。

这里的第二个答案：***.com/questions/10826784/… 为我工作。

组合： * 使用带有透明图像的海报属性，例如 1x1 像素透明。 *使用带有海报的数据设置作为答案*如果您希望海报填满整个 div，请在视频中使用 vjs-poster 类。 * 覆盖一些 css 类：.vjs-poster background-size: cover!important; object-fit: cover!important; video[poster] object-fit: cover; background-color:transparent;

【参考方案2】：

对我有用的是结合以前的答案。这将处理两个海报：

  video[poster]
    object-fit: cover;
  
  .vjs-poster 
    background-size: cover;
    background-position: inherit;
  

【参考方案3】：

简单

video
 object-fit: cover; 

对我来说效果很好

【参考方案4】：

.vjs-poster background-size: cover !important;

如果它不起作用，请尝试添加 !important 标记。