html5 video 不拉伸,HTML 5视频拉伸

如果您的浏览器不支持object-fit:cover风格，这不会改变视频的比例，但会消除视频查看器顶部和底部或侧面的“空白”空间。

比方说，您有一个500x281的页内查看器(从1280x720正确调整大小)。但有时你可能会得到一个视频，其比例与16：9的比例不一致，比如1278x720或320x176，就像W3C网站上的'Buck Bunny'视频一样。如果视频完全填充容器并且您不必为每个不适当比例的视频创建新容器，那就太好了。

给定一个代码片断，如：

#vidcontent {

width:500;

height:281;

border:2px solid #F00;

object-fit:cover; /* for those who do support it */

}

Your browser does not support HTML5 video.

将呈现黑色或白色的线在顶部和底部取决于你的浏览器如何处理object-fit视频。添加以下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);

我们将容器的当前宽度除以确定的视频流的宽度，然后乘以确定的视频流的高度。这导致容器的高度需要尽可能地强制干净。

除了CSS定义之外，重要的是将视频高度和宽度设置为HTML中的属性。