即使海报图像的长宽比与视频元素不同,如何用海报图像填充视频元素？

Question

就目前而言,这仅在WebKit中进行了测试.

<video>使用poster属性在元素上设置海报图像时,将在用户播放视频之前显示此图像(默认行为).但是,如果海​​报图像的宽高比与<video>设置的元素的宽高比不同,则在图像的两侧(左侧或右侧或顶部和底部)可以看到空白(或可能是黑色空间),图像为居中(也是默认行为).

我想知道如何缩放此图像(最好是在CSS中),以便填充视频元素,类似于使用CSS3 background-size: cover;值.

仍然困惑？也许这个JSFiddle会帮助解释:http://jsfiddle.net/jonnymilano/2w2CE/

我也有兴趣将图像强制放入视频容器,扭曲其高度和/或宽度以适应视频容器的尺寸.但是,这个答案只会部分解决我的问题.

Answer 1

这个问题让我思考,你的jsfiddle在解决这个问题上很有用(虽然不适用于IE,因为它没有正确实现海报图像).

基本上将您发布的内容组合在一起,将所需的海报图像设置为视频元素的背景图像,并将2x2透明图像指定为实际的海报图像.

例如

<video controls poster="transparent.png"> 
   <source src="video.mp4" type="video/mp4"> 
   <source src="video.webm" type="video/webm"> 
</video>

和

video { 
   width:305px; 
   height:160px;  
   background:transparent url('poster.jpg') no-repeat 0 0; 
   -webkit-background-size:cover; 
   -moz-background-size:cover; 
   -o-background-size:cover; 
   background-size:cover; 
}

我在HTML5视频和背景图像上写了更多关于它的内容.