即使海報圖像的寬高比不同於其視頻元素，如何使用海報圖像填充視頻元素？

現在，它只在WebKit中進行測試。即使海報圖像的寬高比不同於其視頻元素，如何使用海報圖像填充視頻元素？

當使用poster屬性在<video>元素上設置海報圖像時，此圖像在用戶播放視頻（默認行爲）之前顯示。但是，如果海報圖像的長寬比與其設置的<video>元素的長寬比不同，則會在圖像的任一側（左側和右側或頂部和底部）看到空白（或可能是黑色空白），並且圖像居中（也是默認行爲）。

我想知道如何縮放此圖像（最好在CSS中），以便填充視頻元素，類似於使用CSS3 background-size: cover;值。

還困惑嗎？也許這JSFiddle將幫助解釋：http://jsfiddle.net/jonnymilano/2w2CE/

我也會有興趣的答案強制圖像到視頻容器，翹曲其高度和/或寬度，以適應視頻容器的尺寸。但是，這個答案只能部分解決我的問題。

來源

2013-03-19 jonathanbell

這個問題讓我思考，你的jsfiddle在解決這個問題上很有用（雖然不適用於IE，因爲它沒有正確實現海報圖像）。

基本上結合您發佈的內容，將所需的海報圖像設置爲視頻元素的背景圖像，並將2x2透明圖像指定爲實際海報圖像。

例如

<video controls poster="transparent.png"> 
    <source src="video.mp4" type="video/mp4"> 
    <source src="video.webm" type="video/webm"> 
</video>

和

video { 
    width:305px; 
    height:160px; 
    background:transparent url('poster.jpg') no-repeat 0 0; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    background-size:cover; 
}

我寫一點關於它在HTML5 Video and Background Images。

來源

2013-03-19 20:20:07

非常感謝您花時間發佈此信息。您的解決方案效果非常好！ :)對不起，我不知道這已經被問上了。我確實做了搜索。 – jonathanbell 2013-03-20 17:41:23

不客氣。是的，發現問題已經發布並不容易。 – 2013-03-21 07:49:14

這似乎不適用於IE 10.我得到一個黑盒子而不是背景圖像。 – 2013-10-09 22:55:44

即使海報圖像的寬高比不同於其視頻元素，如何使用海報圖像填充視頻元素？

回答

相關問題