视频JS - 海报图像封面/包含 [英] Video JS - poster image cover/contain

问题描述

VideoJS 4使用不同的CSS行为，从我所用的海报图像从我可以看到。我改变背景CSS大小为覆盖而不是包含，这意味着即使我的图像的比例是错误的，图像将填充海报div。但是，由于某种原因，当您点击海报开始播放视频时，海报图像似乎在视频加载时返回包含。这是在其他地方进行的变更吗？

VideoJS 4 uses different CSS behaviour from what I was used to for the poster image from what I can see. I've changed background-size CSS to "cover" instead of "contain", which means that even if the proportions of my image are wrong, the image will fill the poster div. For some reason, however, when you click on the poster to start a video, the poster image seems to go back to "contain" while the video is loading. Is this change being made elsewhere?

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

提前感谢！

推荐答案

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

As you've specified the poster as an attribute on the video element, you actually end up with two poster images - one in the video element itself, and another which video.js creates as a div overlaying the video element. Your CSS applies to the .vjs-poster div only. When you play the video, the video.js poster div is hidden and you briefly see the video element's own differently scaled poster.

如果不使用poster属性作为 data-setup 中的一个选项，视频元素本身不会创建海报图像，但您仍然可以使用可定制的video.js海报div。 p>

If instead of using the poster attribute you specify it as an option in data-setup instead, the video element itself won't create a poster image but you'll still have the stylable 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/

这篇关于视频JS - 海报图像封面/包含的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！