Question

目前看来，这仅在WebKit中进行了测试。

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

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

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

我也会对将图像强制放入视频容器，使其高度和/或宽度变宽以适应视频容器尺寸的答案感兴趣。但是，这个答案只会部分解决我的问题。

Answer 1

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

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

e.g。

<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写了更多关于它的内容。

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

1 个答案: