HTML 5視頻拉伸

35

從the spec for <video>：

視頻內容要元素的播放區域內呈現，使得視頻內容顯示在適合完全在它的最大可能大小集中在回放區域，視頻內容的寬高比被保留。因此，如果播放區域的寬高比與視頻的寬高比不匹配，則視頻將顯示爲信箱或郵筒。元素播放區域中不包含視頻的區域不代表任何內容。

有沒有規定伸展視頻，而不是信箱。這可能是因爲伸展給用戶帶來了非常不好的體驗，而且大部分時間都不是預期的。默認情況下，圖像被拉伸到合適的程度，因此，您會看到很多圖像嚴重扭曲在線，很可能是由於指定高度和寬度的一個簡單錯誤。

可以實現使用CSS 3 transforms拉伸的效果，但這些都不是完全標準化或實施在所有瀏覽器還沒有，並且在其中實現的那些，你需要使用一個供應商前綴，如-webkit-或-moz-。這裏有一個例子：

<!DOCTYPE html> 
<style> 
video { 
    -webkit-transform: scaleX(2); 
    -moz-transform: scaleX(2); 
} 
</style> 
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></video>

來源

2010-09-23 17:19:17

+2

很好的答案。只需在這裏添加IE瀏覽器，使用'-ms-transform：scaleX（2）;' – Riz 2015-10-14 15:59:07

+0

哇，NICE FIND !! – NoName 2016-12-24 04:13:26

8

也有the object-fit CSS property，這可能會給你你所需要的。

順便提一句，我認爲這個請求與How can I make HTML 5 video playback fit to frame instead of maintaining aspect ratio?相關。

來源

2011-06-19 08:10:41 Silvia

10

這完美的工作對我來說

http://coding.vdhdesign.co.nz/?p=29

$VideoElement = $(_VideoElement); //Cache Jquery reference of this 
var iOriginalVideoHeight = _VideoElement.videoHeight; 
var iCurrentVideoHeight = $VideoElement.height(); 
var iVideoContainerHeight = $VideoElement.parent().height(); 
var iCurrentScale = iOriginalVideoHeight/iCurrentVideoHeight; 
var iScaleY = (iVideoContainerHeight/iOriginalVideoHeight)*iCurrentScale; 


//Important to note: Set the origin to the top left corner (0% 0%), or else the position of the video goes astray 
$VideoElement.css({ 
    "transform-origin": "0% 0%", 
    "transform":"scaleY(" + iScaleY +")", 
    "-ms-transform-origin" : "0% 0% ", /* IE 9 */ 
    "-ms-transform":"scaleY(" + iScaleY +")", /* IE 9 */ 
    "-moz-transform-origin" : "0% 0%", /* Firefox */ 
    "-moz-transform":"scaleY(" + iScaleY +")", /* Firefox */ 
    "-webkit-transform-origin": "0% 0%", /* Safari and Chrome */ 
    "-webkit-transform":"scaleY(" + iScaleY +")", /* Safari and Chrome */ 
    "-o-transform-origin":"0% 0%", /* Opera */ 
    "-o-transform":"scaleY(" + iScaleY +")" /* Opera */ 
});

來源

2013-09-04 14:24:42

+1

你是唯一一個能夠像這樣工作的人，所有其他人都在舉例說明，但它並沒有完成這項工作。感謝你的分享。 – YumYumYum 2014-09-29 10:05:38

38

我已經使用對象的配合測試：填寫CSS

做工不錯。

video { 
    object-fit: fill; 
}

從MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit）：

目的配合CSS屬性指定一個替換元素的內容應該如何被裝配到由它的使用的高度和寬度確定的框。

值：填

被替換的內容的尺寸以填充元素的內容框：該對象的具體對象大小是元素的使用寬度和高度。

來源

2016-09-23 19:19:21

+0

這是非常goooooooood？請添加更多像這樣更有效 – YumYumYum 2016-10-12 19:52:13

+0

好而簡單 – Sudarshan 2018-01-22 07:29:58

+0

這是一個很好的解決方案！ – Vinodkumargb 2018-03-07 07:50:54

2

如果您的瀏覽器不支持object-fit:cover風格，這不會改變視頻的比例，但會消除視頻查看器頂部和底部或側面的「空白」空間。

比方說，您有一個500x281的頁內查看器（從1280x720正確調整大小）。但有時你可能會得到一個視頻，其比例與16：9的比例不一致，比如1278x720或320x176，就像W3C網站上的'Buck Bunny'視頻一樣。如果視頻完全填充容器並且您不必爲每個不適當比例的視頻創建新容器，那就太好了。

給定一個代碼片斷，如：

<style> 
#vidcontent { 
    width:500; 
    height:281; 
    border:2px solid #F00; 
    object-fit:cover; /* for those who do support it */ 
} 
</style> 

<video id="vidcontent" width="500" height="281" autoplay controls loop> 
    <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
    Your browser does not support HTML5 video. 
</video>

將呈現黑色或白色的線在頂部和底部取決於你的瀏覽器如何處理object-fit視頻。添加以下JavaScript以實現視頻容器的動態高度調整大小，通過迫使視頻容器與視頻匹配（至少垂直），使這些線條消失。

<script type="text/javascript"> 
    vidContent = document.getElementById('vidcontent'); 
    vidContent.addEventListener("loadedmetadata", function(e) { 
    var newHeight = (vidContent.width/this.videoWidth) * this.videoHeight; 
    vidContent.style.height = parseInt(Math.ceil(newHeight)) + "px"; 
    }, false); 
</script>

我們將容器的當前寬度除以確定的視頻流的寬度，然後乘以確定的視頻流的高度。這導致容器的高度需要儘可能地強制乾淨。

除了CSS定義之外，重要的是將視頻高度和寬度設置爲HTML中的屬性。

來源

2017-01-26 16:45:32 TadLewis

HTML 5視頻拉伸

回答

相關問題