Video HTML5视频拉伸
你能把视频“拉伸”到视频元素的宽度和高度吗？显然，默认情况下，视频会按比例缩放并安装在视频元素中 感谢： 视频内容应在元素的播放区域内呈现，以便视频内容以完全适合播放区域的最大可能大小显示在播放区域的中心，并保留视频内容的纵横比。因此，如果回放区域的纵横比与视频的纵横比不匹配，则视频将显示为字母框或柱状框。元素的播放区域中不包含视频的区域不表示任何内容 没有关于拉伸视频而不是对其进行字母装箱的规定。这可能是因为拉伸会给用户带来非常糟糕的体验，而且大多数情况下并不是预期的效果。默认情况下，图像会拉伸到合适的位置，因此，您会在网上看到大量严重扭曲的图像，很可能是由于指定高度和宽度时的一个简单错误 虽然尚未在所有浏览器中完全标准化或实现，但您可以通过以下方式实现拉伸效果：使用供应商前缀，如Video HTML5视频拉伸,video,html,Video,Html,你能把视频“拉伸”到视频元素的宽度和高度吗？显然，默认情况下，视频会按比例缩放并安装在视频元素中 感谢： 视频内容应在元素的播放区域内呈现，以便视频内容以完全适合播放区域的最大可能大小显示在播放区域的中心，并保留视频内容的纵横比。因此，如果回放区域的纵横比与视频的纵横比不匹配，则视频将显示为字母框或柱状框。元素的播放区域中不包含视频的区域不表示任何内容 没有关于拉伸视频而不是对其进行字母装箱的规定。这可能是因为拉伸会给用户带来非常糟糕的体验，而且大多数情况下并不是预期的效果。默认情况下，图像会拉
-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>
视频{
-webkit转换：scaleX（2）；
-moz变换：scaleX（2）；
}
顺便说一句，我认为这项请求已实现。这对我来说非常有效
我已经使用objectfit:fill-in-CSS进行了测试 效果很好
video {
object-fit: fill;
}
替换的内容的大小是为了填充元素的内容框：对象的具体对象大小是元素使用的宽度和高度。这不会改变视频的比例，但如果浏览器不支持该选项，则可以去掉视频查看器顶部和底部或侧面丑陋的“未填充”空间
object-fit:cover<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>
除了CSS定义外，在HTML中将视频高度和宽度设置为属性也很重要。您是唯一一个使其正常工作的人，所有其他人都给出了示例，但它没有起到作用。谢谢分享。很好的回答。为了在这里添加IE，请使用
-ms-transform:scaleX（2）太好了！非常感谢对象拟合在ie和edge上不起作用，因此如果您想要一个包容性的解决方案，您应该用类似“transform:scaleX（2）”的hack替换它。它们的工作原理相同：拉伸视频。我们应该提到的是，第二种解决方案是黑客，它有自己的邪恶症状：视频水平溢出，导致页面底部出现水平滚动条。但是我们可以通过在body标签上添加“overflow-x:hidden”来很容易地解决这个问题。简单而智能的解决方案欢迎链接到解决方案，但请确保您的答案在没有它的情况下是有用的：这样您的其他用户就会知道它是什么以及它为什么存在，然后引用你链接到的页面最相关的部分，以防目标页面不可用。
<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>
<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>