使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%;
}

Answer 1

您可以将透明海报图像与CSS背景图像结合使用来实现这一点(example)；但是，要使背景拉伸到视频的高度和宽度，您必须使用use an absolutely positioned

tag (example)。

也可以使用set background-size to 100% 100% in browsers that support background-size (example)。

​

更新

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

使用

object-fit: cover;

如果您不想显示图像中与视频的纵横比不匹配的部分，并且

object-fit: fill;

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

Example

Answer 2

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

object-fit: cover;

或者也许fill就是你要找的东西。仍然是under consideration for IE。

Answer 3

或者您可以简单地使用preload="none"属性来使视频背景可见。你可以在这里使用background-size: cover;。

 video {
   background: transparent url('video-image.jpg') 50% 50% / cover no-repeat ;
 }

 <video preload="none" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
 </video>