使 HTML5 视频海报与视频本身大小相同

Question

有谁知道如何调整 HTML5 视频海报的大小，使其适合视频本身的确切尺寸？

这是一个显示问题的jsfiddle：http: //jsfiddle.net/zPacg/7/

这是代码：

HTML:

 <video controls width="100%" height="100%"  poster="http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_orange_rectangle.png">
  <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.ogg" type="video/ogg" />
  <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webm" />
</video>​

CSS：

 video{
border:1px solid red;
}​

请注意，橙色矩形不会缩放到视频的红色边框。

此外，仅添加下面的 CSS 也不起作用，因为它会随海报一起重新缩放视频：

 video[poster]{
height:100%;
width:100%;
}

原文由 tim peterson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以结合使用透明海报图像和 CSS 背景图像来实现此目的（ 示例）；但是，要将背景拉伸到视频的高度和宽度，您必须 使用绝对定位的 <img> 标签（ 示例）。

也可以在 支持 background-size 100% 100% background-size ） 。

---

更新

更好的方法是使用 object-fit CSS 属性，如@Lars Ericsson 所建议的。

利用

object-fit: cover;

如果您不想显示不适合视频宽高比的图像部分，并且

object-fit: fill;

拉伸图像以适合视频的纵横比

例子

原文由 user2428118 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

根据您的目标浏览器，您可以使用 object-fit 属性来解决这个问题：

 object-fit: cover;

或者也许 fill 是你要找的。还在 考虑换IE 。

原文由 Lars Ericsson 发布，翻译遵循 CC BY-SA 3.0 许可协议