HTML 5 视频拉伸
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3779771/
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
HTML 5 Video stretch
提问by TD540
Can you make a video "stretch" to the width & height of the video element? Apparentlyby default, video gets scaled & fitted inside the video element, proportionally.
您可以将视频“拉伸”到视频元素的宽度和高度吗？显然默认情况下，视频会按比例缩放并适合视频元素。
thanks
谢谢
回答by Leo Yu
I have tested by using object-fit: fill in CSS
我已经通过使用 object-fit: fill in CSS 进行了测试
Works good.
效果很好。
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 Brian Campbell
From the spec for <video>:
Video content should be rendered inside the element's playback area such that the video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content's aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area that do not contain the video represent nothing.
视频内容应在元素的播放区域内呈现，以便视频内容以完全适合播放区域的最大可能尺寸显示在播放区域的中心，同时保留视频内容的纵横比。因此，如果播放区域的纵横比与视频的纵横比不匹配，视频将显示为信箱或邮筒。元素播放区域中不包含视频的区域不代表任何内容。
There are no provisions for stretching the video instead of letterboxing it. This is likely because stretching gives a very bad user experience, and most of the time is not what is intended. Images are stretched to fit by default, and because of that, you see lots of images which are badly distorted online, most likely due to a simple mistake in specifying the height and width.
没有规定可以拉伸视频而不是将其装箱。这可能是因为拉伸会带来非常糟糕的用户体验，而且大部分时间都不是预期的。默认情况下，图像被拉伸以适应，因此，您会在网上看到许多严重扭曲的图像，很可能是由于指定高度和宽度时的一个简单错误。
You can achieve a stretched effect using CSS 3 transforms, though those aren't fully standardized or implemented in all browsers yet, and the ones in which it is implemented, you need to use a vendor prefix such as -webkit-or -moz-. Here's an example:
您可以使用CSS 3 转换实现拉伸效果，尽管这些转换尚未完全标准化或在所有浏览器中实现，并且在实现它的浏览器中，您需要使用供应商前缀，例如-webkit-或-moz-。下面是一个例子：
<!DOCTYPE html>
<style>
video {
-webkit-transform: scaleX(2);
-moz-transform: scaleX(2);
}
</style>
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></video>
回答by danivicario
This worked perfectly for me
这对我来说非常有效
http://coding.vdhdesign.co.nz/?p=29
http://coding.vdhdesign.co.nz/?p=29
$VideoElement = $(_VideoElement); //Cache Jquery reference of this
var iOriginalVideoHeight = _VideoElement.videoHeight;
var iCurrentVideoHeight = $VideoElement.height();
var iVideoContainerHeight = $VideoElement.parent().height();
var iCurrentScale = iOriginalVideoHeight/iCurrentVideoHeight;
var iScaleY = (iVideoContainerHeight / iOriginalVideoHeight)*iCurrentScale;
//Important to note: Set the origin to the top left corner (0% 0%), or else the position of the video goes astray
$VideoElement.css({
"transform-origin": "0% 0%",
"transform":"scaleY(" + iScaleY +")",
"-ms-transform-origin" : "0% 0% ", /* IE 9 */
"-ms-transform":"scaleY(" + iScaleY +")", /* IE 9 */
"-moz-transform-origin" : "0% 0%", /* Firefox */
"-moz-transform":"scaleY(" + iScaleY +")", /* Firefox */
"-webkit-transform-origin": "0% 0%", /* Safari and Chrome */
"-webkit-transform":"scaleY(" + iScaleY +")", /* Safari and Chrome */
"-o-transform-origin":"0% 0%", /* Opera */
"-o-transform":"scaleY(" + iScaleY +")" /* Opera */
});
回答by Silvia
There is also the object-fit CSS property, which will likely give you what you need.
还有object-fit CSS 属性，它可能会给你你需要的东西。
Incidentally, I think this request is realated to How can I make HTML 5 video playback fit to frame instead of maintaining aspect ratio?.
顺便说一句，我认为此请求与如何使 HTML 5 视频播放适合帧而不是保持纵横比有关？.
回答by TadLewis
This won't change the proportion of your video but gets rid of ugly 'unfilled' spaces at the top and bottom or sides of your video viewer IF your browser doesn't support the object-fit:coverstyle.
如果您的浏览器不支持该object-fit:cover样式，这不会改变视频的比例，但会消除视频查看器顶部和底部或侧面的丑陋“未填充”空间。
Let's say you have an in-page viewer that's 500x281 (a proper resizing from 1280x720). But sometimes you may get a video that's not properly proportioned to exactly 16:9, say 1278x720 or 320x176 as in the case of the 'Buck Bunny' video on the W3C site. It would be nice if the video filled the container completely and you don't have to create a new container for every improperly proportioned video.
假设您有一个 500x281 的页内查看器（从 1280x720 适当调整大小）。但有时您可能会得到一个与 16:9 比例不正确的视频，比如 1278x720 或 320x176，就像 W3C 网站上的“Buck Bunny”视频一样。如果视频完全填满容器，并且您不必为每个比例不当的视频创建新容器，那就太好了。
Given a code fragment like:
给定一个代码片段，如：
<style>
#vidcontent {
width:500;
height:281;
border:2px solid #F00;
object-fit:cover; /* for those who do support it */
}
</style>
<video id="vidcontent" width="500" height="281" autoplay controls loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
will render a video with black or white lines at the top and bottom depending on how your browser handles object-fit. Add the following JavaScript for an on the fly height resizing of the video container making those lines go away by forcing your video container to match the video, at least vertically.
将根据浏览器的处理方式在顶部和底部呈现带有黑色或白色线条的视频object-fit。添加以下 JavaScript 以动态调整视频容器的高度，通过强制您的视频容器至少垂直匹配视频，使这些线条消失。
<script type="text/javascript">
vidContent = document.getElementById('vidcontent');
vidContent.addEventListener("loadedmetadata", function(e) {
var newHeight = (vidContent.width/this.videoWidth) * this.videoHeight;
vidContent.style.height = parseInt(Math.ceil(newHeight)) + "px";
}, false);
</script>
We divide the current width of the container by the determined width of the video stream then multiply by the determined height of the video stream. That results in what the height of the container needs to be to force as clean of a fit as possible.
我们将容器的当前宽度除以视频流的确定宽度，然后乘以视频流的确定高度。这导致容器的高度需要达到尽可能干净的配合。
It is important that the video height and width are set as attributes in the HTML in addition to the CSS definition.
除了 CSS 定义之外，视频高度和宽度在 HTML 中设置为属性非常重要。
