4

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

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

提前致谢！

4

4 回答 4

15

当您将海报指定为视频元素的属性时，您实际上会得到两张海报图片 - 一张在视频元素本身中，另一张由 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/

于 2013-08-14T12:03:22.587 回答
5

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

  video[poster]{
    object-fit: cover;
  }
  .vjs-poster {
    background-size: cover;
    background-position: inherit;
  }
于 2017-07-15T13:47:52.393 回答
1

简单的

video{
 object-fit: cover; 
}

为我工作很好

于 2019-03-14T15:21:15.753 回答
0

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

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

于 2021-06-22T15:12:11.073 回答