如何在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視頻放到一定的高度和寬度？

回答

相關問題