【发布时间】：2019-06-05 16:55:03
【问题描述】：
您能否将视频“拉伸”到视频元素的宽度和高度？显然，默认情况下，视频会按比例缩放并安装在视频元素中。
谢谢
【问题讨论】：
【发布时间】：2019-06-05 16:55:03
【问题描述】：
我已经使用 object-fit 进行了测试：填写 CSS
效果很好。
video {
object-fit: fill;
}
来自 MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)：
object-fit CSS 属性指定被替换元素的内容应如何适应由其使用的高度和宽度建立的框。
值：填充
被替换的内容的大小可以填充元素的内容框：对象的具体对象大小是元素使用的宽度和高度。
【讨论】：
-
太棒了！非常感谢
-
object-fit 在 ie 和 edge 上不起作用，所以如果你想要一个包容性的解决方案，你应该用类似 'transform:scaleX(2)' 的 hack 替换它。它们的工作原理相同：拉伸视频。值得一提的是，第二种解决方案是 hack，它有其自身的邪恶症状：视频水平溢出，导致页面底部出现水平滚动条。但是我们可以通过将 'overflow-x:hidden' 放在 body 标签上来轻松解决这个问题。
-
简单智能的解决方案
-
确保视频和容器具有完整的宽度和高度。
height: 100%; width: 100%
视频内容应在元素的播放区域内呈现，以便视频内容在播放区域的中心以完全适合该区域的最大可能尺寸显示，同时保留视频内容的纵横比。因此，如果播放区域的纵横比与视频的纵横比不匹配，则视频将显示为信箱或邮筒。元素的播放区域中不包含视频的区域不代表任何内容。
没有用于拉伸视频而不是信箱化的规定。这可能是因为拉伸会给用户带来非常糟糕的体验，而且大多数情况下并不是预期的。默认情况下，图片会被拉伸以适合，因此，您会在网上看到很多严重扭曲的图片，这很可能是由于指定高度和宽度时的一个简单错误。
您可以使用CSS 3 transforms 实现拉伸效果，尽管这些还没有完全标准化或在所有浏览器中实现，并且实现它的那些，您需要使用供应商前缀，例如-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>
【讨论】：
-
很好的答案。只需在此处添加 IE，请使用
-ms-transform: scaleX(2);
这对我来说非常有效
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 */
});
【讨论】：
-
你是唯一一个让这个工作像它应该的那样工作的人，所有其他人都在举例子，但它没有做这项工作。谢谢分享。
还有the object-fit CSS property，它可能会给你你需要的东西。
顺便说一句，我认为这个请求是针对How can I make HTML 5 video playback fit to frame instead of maintaining aspect ratio? 的。
【讨论】：
-
欢迎提供解决方案的链接，但请确保您的答案在没有它的情况下有用：add context around the link 这样您的其他用户就会知道它是什么以及为什么会出现，然后引用最相关的内容您链接到的页面的一部分，以防目标页面不可用。 Answers that are little more than a link may be deleted.
如果您的浏览器不支持object-fit:cover 样式，这不会改变您的视频的比例，但会消除视频查看器顶部和底部或侧面的丑陋“未填充”空间。
假设您有一个 500x281 的页内查看器（从 1280x720 适当调整大小）。但有时您可能会看到与 16:9 比例不正确的视频，例如 1278x720 或 320x176，例如 W3C 网站上的“Buck Bunny”视频。如果视频完全填满了容器，并且您不必为每个比例不当的视频创建新容器，那就太好了。
给定如下代码片段：
<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>
将根据您的浏览器处理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>
我们将容器的当前宽度除以视频流的确定宽度，然后乘以视频流的确定高度。这导致容器的高度需要尽可能地干净。
除了 CSS 定义之外，将视频高度和宽度设置为 HTML 中的属性很重要。
【讨论】：