伸展html5視頻而不保留縱橫比jQuery

無論您的CSS告訴他們做什麼，HTML5視頻都具有固有的縱橫比，並且傾向於保留它。伸展html5視頻而不保留縱橫比jQuery

我有一個不是16：9的響應式視頻容器，並且我希望它內部的視頻伸展到100％寬度和100％高度，即使它打破了它們的原始高寬比。

我已閱讀了關於CSS object-fit：fill屬性，它可以解決我的問題，但在現代瀏覽器支持它之前還有很長的路要走。所以我想我必須轉向Javascript來實現我所需要的。

我碰到這個小提琴：

function scaleToFill(videoTag) { 
var $video = $(videoTag), 
    videoRatio = videoTag.videoWidth/videoTag.videoHeight, 
    tagRatio = $video.width()/$video.height(); 
if (videoRatio < tagRatio) { 
     $video.css('-webkit-transform','scaleX(' + tagRatio/videoRatio + ')') 
} else if (tagRatio < videoRatio) { 
     $video.css('-webkit-transform','scaleY(' + videoRatio/tagRatio + ')') 
} 
} 

$(function() { 
$("#testVideo").click(function(evt) { 
    scaleToFill(document.getElementsByTagName("video")[0]); 
}); 
});

不過，我似乎無法獲得此代碼工作。控制檯告訴我無法讀取videoWidth屬性。

在此先感謝您的幫助！

來源

2013-07-18 Tom S.

這真的對我有用。 –

從HTML5規範報價爲<video>標籤：

視頻內容要元素的播放區域內呈現使得視頻內容居中顯示在播放區域在的最大可能大小適合完全在其中，視頻內容的寬高比被保留。因此，如果播放區域的比例與視頻的寬高比不匹配，則視頻將顯示爲信箱或郵筒。區域範圍元素的播放區域不包含視頻代表什麼都沒有。

至於videoWidth具體來說，它似乎是supported by all major browsers，所以我不知道你的問題在那裏。

就我所知，在鏈接的jsfiddle中顯示的CSS轉換在<video>的效果上並不標準化，但它們在IE10和最新的Chrome和Firefox中都適用於我。不過，我想知道，如果您嘗試在不是Chrome的瀏覽器上使用jsfiddle。您提供的腳本僅添加webkit轉換，因此我已對其進行了修改以在其他渲染器上進行轉換，並增加了比率以使效果更加明顯。

看一看this new one。希望這是你想要的。另外，here is a pure CSS one，因爲JavaScript確實不需要進行這些更改，除非由於某些原因需要計算新比率並且不能使其爲靜態。唯一的問題是控件不可見，所以我添加了自動播放屬性。

來源

2013-11-09 09:02:48 mirichan

伸展html5視頻而不保留縱橫比jQuery

回答

相關問題