如何在 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。很可能在重新缩放视频导航后看起来 'funny' 所以你可能想要包含某种 JS/jQuery 自定义控件插件或自己编写一个。

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

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

How to fit a mp4 video to a certain height and width in IE?

html

javascript

css

html5-video