如何在 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