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

我有一段代码如下如何在IE中将mp4视频放到一定的高度和宽度？

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浏览器的宽度（您可以在视频的两侧看到黑色部分）。

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

来源

2015-10-08 Sachin B. R.

我猜你不能？ IE使用比例如不同的播放器铬。 –

如果您没有问题不支持低于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/

来源

2015-10-08 13:39:46 Max

这没有奏效。它没有将视频延伸到所需的宽度。这里是小提琴 - > https://jsfiddle.net/sachinbr/zzhqmcqx/ –

当然，我应该从vid计算宽度和高度，而不是风格。对困惑感到抱歉。尽管如此，我已经编辑了我的答案并添加了工作小提琴。希望现在没问题。 – Max

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

回答

相关问题