videojs动态封面_视频JS - 海报图像封面/包含

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?

Thanks in advance!

解决方案

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.

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.

controls="controls" preload="none" width="500" height="250"

data-setup='{"poster":"http://jamhouse.com.au/media/video/orchlapse.jpg"}'>