Question

VideoJS 4使用了与我所习惯的不同的CSS行为，从我所看到的海报图像。我已经将背景大小的CSS改为“覆盖”而不是“包含”，这意味着即使我的图像比例错误，图像也会填充海报div。但是，出于某种原因，当您单击海报上开始播放视频时，海报图像似乎会在视频加载时返回“包含”状态。这种变化是在其他地方进行的吗？

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

提前致谢！

Answer 1

当您将海报指定为视频元素的属性时，实际上您最终得到了两个海报图像 - 一个在视频元素本身，另一个视频.js创建为覆盖视频元素的div。您的CSS仅适用于.vjs-poster div。播放视频时，会隐藏video.js海报div，您可以短暂地看到视频元素自己的缩放海报。

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

<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/

Answer 2

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

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

Answer 3

简单

video{
 object-fit: cover; 
}

为我工作得很好

Answer 4

:- !

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

视频JS - 海报图片封面/包含

4 个答案: