参见英文答案 >
Make HTML5 video poster be same size as video itself10个
现在,这只是在WebKit中测试.
现在,这只是在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写了一些更多的内容.