Html 即使海报图像的纵横比与其视频元素不同，如何用海报图像填充视频元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15508421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fill video element with poster image even if the poster image is a different aspect ratio than its video element?
提问by jonathanbell
As it stands right now, this is only tested in WebKit.
就目前而言，这仅在 WebKit 中进行了测试。
When a poster image is set on a <video>element using the posterattribute, this image displays before the user plays the video (default behavior). However, if the poster image is of a different aspect ratio than that of the <video>element that it is set on, whitespace (or possibly blackspace) is seen on either side of the image (left and right or top and bottom) and the image is centered (also, default behavior).
当<video>使用该poster属性在元素上设置海报图像时，该图像会在用户播放视频之前显示（默认行为）。但是，如果海报图像的纵横比与其<video>设置的元素的纵横比不同，则在图像的任一侧（左侧和右侧或顶部和底部）都会看到空白（或可能是黑色），并且图像是居中（也是默认行为）。
I would like to know how to scale this image up (preferably in CSS) so that it fills the video element, similar to using the CSS3 background-size: cover;value.
我想知道如何放大此图像（最好在 CSS 中）以填充视频元素，类似于使用 CSS3background-size: cover;值。
Still confused? Perhaps this JSFiddle will help explain: http://jsfiddle.net/jonnymilano/2w2CE/
还迷茫吗？也许这个 JSFiddle 将有助于解释：http: //jsfiddle.net/jonnymilano/2w2CE/
I would also be interested in answers that forced the image into the video container, warping its height and/or width to fit the dimensions of the video container. However, this answer would only partially solve my issue.
我也会对强制图像进入视频容器的答案感兴趣，扭曲其高度和/或宽度以适应视频容器的尺寸。但是，这个答案只能部分解决我的问题。
回答by Ian Devlin
This question got me thinking and your jsfiddle was useful in solving this (albeit not for IE as it doesn't implement the poster image correctly).
这个问题让我思考，你的 jsfiddle 对解决这个问题很有用（尽管不适用于 IE，因为它没有正确实现海报图像）。
Basically combine what you posted, set the required poster image as the background image of the video element and specify a 2x2 transparent image as the actual poster image.
基本上结合您发布的内容，将所需的海报图像设置为视频元素的背景图像，并指定一个 2x2 透明图像作为实际海报图像。
e.g.
例如
<video controls poster="transparent.png">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
and
和
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;
}
I wrote a bit more about it at HTML5 Video and Background Images.
我在HTML5 Video and Background Images 上写了更多关于它的内容。
