如何使 HTML 5 视频播放适合帧而不是保持纵横比？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2371040/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make HTML 5 video playback fit to frame instead of maintaining aspect ratio?
提问by Jim Jeffers
I've been experimenting with HTML5 video playback. For example I have this video object embedded on my page:
我一直在试验 HTML5 视频播放。例如，我在我的页面上嵌入了这个视频对象：
<video width="480" height="380" class="ecard" tabindex="0">
<source type="video/ogg; codecs="theora, vorbis"" src="videos/1156 In your honor we'll be dancing.ogv"></source>
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" 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?
我的问题是视频元素保留了它的纵横比，而我更愿意强制播放适合帧。有谁知道这样做的方法？
回答by foolip
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:
目前没有办法做到这一点，但有了 CCS3 图像适合属性，这将成为可能。不过，目前还没有浏览器支持它。然后你可以使用它来使所有视频拉伸到宽度/高度：
video {
image-fit: fill;
}
See spec at http://dev.w3.org/csswg/css3-page/#propdef-image-fit
请参阅http://dev.w3.org/csswg/css3-page/#propdef-image-fit 上的规范
回答by Silvia
A little late now, but the object-fit CSS3 property will satisfy this need. http://dev.w3.org/csswg/css3-images/#object-fitIt is already implemented in Opera, see http://my.opera.com/desktopteam/blog/2010/08/03/presto-update.
现在有点晚了，但是 object-fit CSS3 属性将满足这种需求。http://dev.w3.org/csswg/css3-images/#object-fit已经在 Opera 中实现了，参见http://my.opera.com/desktopteam/blog/2010/08/03/presto-更新。
回答by Simon Mattes
If you want the video to fill the entire frame AND maintain its aspect ratio, use the following:
如果您希望视频填满整个帧并保持其纵横比，请使用以下命令：
video
{
object-fit: cover;
height: 100%;
width: 100%;
}
回答by Leo Yu
I tried image-fit, but failed.
我尝试过图像拟合，但失败了。
then by checking above answers, I use object-fit in CSS:
然后通过检查上面的答案，我在 CSS 中使用 object-fit：
video {
object-fit: fill;
}
From MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):
来自 MDN ( https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)：
The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.
object-fit CSS 属性指定被替换元素的内容应该如何适应由其使用的高度和宽度建立的框。
Value: fill
值：填充
The replaced content is sized to fill the element's content box: the object's concrete object size is the element's used width and height.
被替换的内容的大小可以填充元素的内容框：对象的具体对象大小是元素使用的宽度和高度。
回答by magikMaker
You can also do this: Place the video element in the center with leftand topof 50%, then translate it back with transform: translate(-50%, -50%);, finally give it a min-heightand min-widthof 100%
你也可以这样做：将与中心的视频元素left和top的50％，然后把它转变回来transform: translate(-50%, -50%);，最后给它一个min-height和min-width的100％
video {
left: 50%;
min-height: 100%;
min-width: 100%;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
}
回答by Audun
Yes, I do think theres is at least one way to do it, but it's quite ugly: Scale the video element using CSS Transforms (or maybe SVG). The problem is that I think you would have to some Javascript to calculate the appropriate scale ratio based on the size of the container.
是的，我确实认为至少有一种方法可以做到这一点，但它非常难看：使用 CSS Transforms（或者可能是 SVG）缩放视频元素。问题是我认为您必须使用一些 Javascript 才能根据容器的大小计算适当的缩放比例。
The good news would be that WebKit and Gecko has supported CSS Transforms for quite some time and also Opera 10.50 supports it. And they all support SVG.
好消息是 WebKit 和 Gecko 已经支持 CSS Transforms 有一段时间了，Opera 10.50 也支持它。他们都支持SVG。
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/#transformshttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
http://dev.opera.com/articles/view/css3-transitions-and-2d-transforms/#transforms https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
