如何使HTML 5视频播放适合帧而不是保持宽高比？

Question

我一直在尝试HTML5视频播放.例如,我在页面上嵌入了这个视频对象:

<video width="480" height="380" class="ecard" tabindex="0">
   <source type="video/ogg; codecs=&quot;theora, vorbis&quot;" src="videos/1156 In your honor we'll be dancing.ogv"></source>
   <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="videos/1156 In your honor we'll be dancing.mp4"></source>
</video>

我的问题是视频元素保留了它的宽高比,而我宁愿强制播放适合帧.有谁知道这样做的方法？

Answer 1

目前无法做到这一点,但凭借CCS3图像适合属性,它将成为可能.但是,没有浏览器支持它.然后你可以使用它来使所有视频拉伸到宽度/高度:

video {
  image-fit: fill;
}

请参阅http://dev.w3.org/csswg/css3-page/#propdef-image-fit上的规范

Answer 2

现在有点晚了,但是对象适合的CSS3属性将满足这种需求.http://dev.w3.org/csswg/css3-images/#object-fit已在Opera中实现,请参阅http://my.opera.com/desktopteam/blog/2010/08/03/presto-更新.

Answer 3

如果要使视频充满整个画面并保持其纵横比，请使用以下方法：

video
{
  object-fit: cover;
  height: 100%;
  width: 100%;
}