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

参见英文答案 > Make HTML5 video poster be same size as video itself10个
现在,这只是在WebKit中测试.

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

我想知道如何将这个图像放大(最好在CSS中),以便它填充视频元素,类似于使用CSS3 background-size：cover;值.

还困惑吗也许这个JSfiddle将有助于解释：http://jsfiddle.net/jonnymilano/2w2CE/

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

解决方法

这个问题让我想起来,你的jsfiddle在解决这个问题上是有用的(尽管不是为了IE而不是正确地实现海报图像).

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

例如

<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 Video and Background Images写了一些更多的内容.

原文地址：https://www.jb51.cc/html5/168682.html