如何使 HTML 5 视频播放适合帧而不是保持宽高比？
我一直在尝试 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>
我的问题是视频元素保留其宽高比，而我更愿意强制播放适合框架。有谁知道如何做到这一点？
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="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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
目前还没有办法做到这一点，但有了 CCS3 图像拟合特性，这将成为可能。但目前还没有浏览器支持它。然后您可以使用它使所有视频拉伸到宽度/高度：
请参阅 http://dev.w3.org/csswg/css3-page/#propdef-image-fit
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:
See spec at http://dev.w3.org/csswg/css3-page/#propdef-image-fit
如果您希望视频填充整个帧并保持其宽高比，请使用以下命令：
If you want the video to fill the entire frame AND maintain its aspect ratio, use the following:
现在有点晚了，但是 object-fit CSS3 属性将满足这个需求。 http://dev.w3.org/csswg/css3-images/#object-fit 它已在 Opera 中实现，请参阅 http://my.opera.com/desktopteam /blog/2010/08/03/presto-update 。
A little late now, but the object-fit CSS3 property will satisfy this need. http://dev.w3.org/csswg/css3-images/#object-fit It is already implemented in Opera, see http://my.opera.com/desktopteam/blog/2010/08/03/presto-update .
您还可以执行以下操作：将视频元素放在中心，
left和top均为 50%，然后使用transform:translate(-50%) 将其平移回来, -50%);，最后给它一个min-height和min-width为 100%You can also do this: Place the video element in the center with
leftandtopof 50%, then translate it back withtransform: translate(-50%, -50%);, finally give it amin-heightandmin-widthof 100%我尝试了图像拟合，但失败了。
然后通过检查上面的答案，我在 CSS 中使用 object-fit：
来自 MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)：
object-fit CSS 属性指定被替换元素的内容应如何适应根据其使用的高度和宽度建立的盒子。
值： fill
替换内容的大小适合填充元素的内容框：对象的具体对象大小是元素使用的宽度和高度。
I tried image-fit, but failed.
then by checking above answers, I use object-fit in CSS:
From 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.
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.
是的，我确实认为至少有一种方法可以做到这一点，但它很丑陋：
使用 CSS 变换（或者可能是 SVG）缩放视频元素。问题是我认为你需要一些 JavaScript 来根据容器的大小计算适当的比例。
好消息是 WebKit 和 Gecko 已经支持 CSS Transforms 有一段时间了，Opera 10.50 也支持它。而且他们都支持SVG。
http://dev.opera.com/articles /view/css3-transitions-and-2d-transforms/#transforms
https://developer.mozilla.org/en-US/文档/Web/CSS/CSS_Transforms/Using_CSS_transforms
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.
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.
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