如何使HTML 5视频播放适合帧而不是保持宽高比？ [英] How can I make HTML 5 video playback fit to frame instead of maintaining aspect ratio?

问题描述

我一直在尝试HTML5视频播放。例如，我在我的页面上嵌入了这个视频对象：

I've been experimenting with HTML5 video playback. For example I have this video object embedded on my page:

<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>

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

My problem is the video element preserves it's aspect ratio whereas I would prefer to force the playback to fit to frame. Does anyone know a way to do this?

推荐答案

目前无法做到这一点，但CCS3图像适合财产将成为可能。但是，没有浏览器支持它。然后你可以使用它来使所有视频延伸到宽度/高度：

There is currently no way of doing this, but with the CCS3 image-fit property it will become possible. No browser supports it yet, though. Then you could use this to make all videos stretch to width/height:

video {
  image-fit: fill;
}

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

这篇关于如何使HTML 5视频播放适合帧而不是保持宽高比？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！