标签 html css html5-video
<分区>
就目前而言，这仅在 WebKit 中进行了测试。
当在 <video> 上设置海报图像时使用 poster 的元素属性，此图像会在用户播放视频之前显示(默认行为)。但是，如果海报图像的宽高比与 <video> 不同设置它的元素，在图像的任一侧(左右或顶部和底部)都可以看到空白(或可能是黑色)，并且图像居中(也是默认行为)。
我想知道如何放大此图像(最好是在 CSS 中)以便它填充视频元素，类似于使用 CSS3 background-size: cover;值(value)。
还在迷茫？也许这个 JSFiddle 将有助于解释:http://jsfiddle.net/jonnymilano/2w2CE/
我也会对将图像强制放入视频容器、扭曲其高度和/或宽度以适应视频容器尺寸的答案感兴趣。但是，这个答案只能部分解决我的问题。
最佳答案
这个问题让我开始思考，你的 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 上写了更多关于它的内容.
关于html - 即使海报图像与其视频元素的宽高比不同，如何用海报图像填充视频元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15508421/