25

就目前而言，这仅在 WebKit 中进行了测试。

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

我想知道如何放大这个图像（最好在 CSS 中），以便它填充视频元素，类似于使用 CSS3background-size: cover;值。

还在迷茫吗？也许这个 JSFiddle 将有助于解释：http: //jsfiddle.net/jonnymilano/2w2CE/

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

4

1 回答 1

55

这个问题让我开始思考，你的 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 Video and Background Images上写了更多关于它的内容。

于 2013-03-19T20:20:07.797 回答