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

【问题标题】：Video JS - poster image cover/containVideo JS - 海报图片封面/包含
【发布时间】：2013-08-16 07:14:35
【问题描述】：

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

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

提前致谢！

【问题讨论】：

标签： css video.js

【解决方案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" width="500" height="250"
  data-setup='{"poster":"http://jamhouse.com.au/media/video/orchlapse.jpg"}'>

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

【讨论】：

试过上面的，没有背景可见。
这里的第二个答案：stackoverflow.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 标记。

【讨论】：