如何在视频元素中填充海报图像，即使海报图像与其视频元素具有不同的纵横比？

Question

如何在视频元素中填充海报图像，即使海报图像与其视频元素具有不同的纵横比？

26

目前为止，这只在 WebKit 中进行了测试。

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

我想知道如何将此图像缩放（最好使用 CSS）以使其填充<video>元素，类似于使用CSS3的background-size: cover;值。

还感到困惑吗？也许这个 JSFiddle 会有所帮助：http://jsfiddle.net/jonnymilano/2w2CE/

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

- jonathanbell

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ian Devlin · Accepted Answer

这个问题让我思考，你的 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视频和背景图片写得更详细了一些。