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

Question

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

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

提前致谢!

Answer 1

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

如果不是使用poster属性而是将其指定为选项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/

Answer 2

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

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