如何在 IE 中将 mp4 视频调整到一定的高度和宽度？

Question

我有一个代码片段如下

 video { object-fit:fill; }

 <!DOCTYPE html> <html> <body> <video width="800" height="240" controls> <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> </body> </html>

我试图将视频调整到一定的宽度和高度，但视频没有被拉伸以适应 IE 中的宽度（您可以在视频的两侧看到黑色部分）。

有没有人有解决这个问题的方法？

Answer 1

如果您不支持版本 9 以下的 IE，您可以尝试使用 css 转换：

首先，将您的视频包装在所需宽度和高度的标签中：

<div id="videoWrapper" style="width: 800px; height: 240px;">
     <video id="videoFill">
         <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
         Your browser does not support the video tag.
     </video>
</div>

现在，您可以使用 JS 相应地重新缩放视频（在检查客户端浏览器类型和版本后）：

var wrap = document.getElementById("videoWrapper");
var vid = document.getElementById("videoFill");

var newScaleX = parseInt(wrap.style.width)/vid.offsetWidth;
var newScaleY = parseInt(wrap.style.height)/vid.offsetHeight;
var scaleString = "scale(" + newScaleX + ", " + newScaleY + ")";

vid.style.msTransformOrigin = "left top";
vid.style.msTransform = scaleString;

请注意，我从视频标签中删除了controls 。 很有可能在重新缩放视频导航后看起来很“有趣”，因此您可能想要包含某种 JS/jQuery 自定义控件插件或自己编写一个。

工作小提琴（仅限 IE > 8）： https : //jsfiddle.net/4ec1wxn8/

如何在 IE 中将 mp4 视频调整到一定的高度和宽度？

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-10-08 13:39:46

如何在 IE 中将 mp4 视频调整到一定的高度和宽度？

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-10-08 13:39:46

解决方案1
1 已采纳 2015-10-08 13:39:46