即使海报图像的宽高比与其视频元素不同，如何用海报图像填充视频元素？ [复制]

Posted 2023-05-07

【中文标题】即使海报图像的宽高比与其视频元素不同，如何用海报图像填充视频元素？ [复制]

【英文标题】：How to fill video element with poster image even if the poster image is a different aspect ratio than its video element? [duplicate]

【发布时间】：2013-03-08 15:42:35

【问题描述】：

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

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

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

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

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

【参考方案1】：

这个问题让我思考，你的 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 写了更多关于它的文章。

【讨论】：

非常感谢您抽出宝贵时间发布此内容。您的解决方案效果很好！ :) 对不起，我不知道这已经被问过了。我确实进行了搜索。

不客气。是的，发现问题已经发布并不总是那么容易。

这似乎不适用于 IE 10。我得到一个黑框而不是背景图像。

视频结束后如何让海报图片再次显示？

添加数据透明 gif 而不是另一个请求：“data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAAAAAAEAAAIBRAA7”