文章/答案/技术大牛

发布

社区首页 >问答首页 >视频JS -海报图像封面/内含

问视频JS -海报图像封面/内含
EN

Stack Overflow用户

提问于 2013-08-14 19:02:18

回答 4查看 21.2K关注 0票数 4

VideoJS 4使用了不同于我所看到的海报图像的CSS行为。我把背景大小的CSS改成了“封面”而不是“包含”，这意味着即使我的图片的比例是错误的，图片也会填满海报的div。然而，由于某些原因，当你点击海报开始一个视频，海报图像似乎回到了“包含”，而视频正在加载。这种变化在其他地方也在发生吗？

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

提前感谢！

css

video.js

回答 4

Stack Overflow用户

发布于 2013-08-14 20:03:23

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

如果不使用poster属性，而是将其指定为data-setup中的一个选项，则视频元素本身不会创建海报图像，但您仍然可以使用可设置样式的video.js poster 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/

票数 15

Stack Overflow用户

发布于 2017-07-15 21:47:52

对我来说起作用的是之前答案的组合。这将处理这两个海报：

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

票数 5

Stack Overflow用户

发布于 2019-03-14 23:21:16

简单

video{
 object-fit: cover; 
}

对我来说效果很好

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18229974

复制

相似问题

问视频JS -海报图像封面/内含
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问视频JS -海报图像封面/内含EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问视频JS -海报图像封面/内含
EN