在調整頁面大小之前，Chrome瀏覽器不顯示HTML5視頻

我正在嘗試爲正在開發的網站創建完整的背景視頻。在調整頁面大小之前，Chrome瀏覽器不顯示HTML5視頻

我有我的視頻標籤設置正確，它在Safari和Firefox中播放效果很好，但在Chrome中有問題。

當我在Chrome中播放音樂時，音頻開始播放，但沒有出現視頻。該視頻僅在您調整頁面大小或進行其他視覺操作時纔會顯示，例如在頁面上選擇文字。然後頁面顯示視頻。

是否有此修復程序，或某種方式誘騙到Chrome的渲染正確的視頻？它看起來並不是一個編解碼器問題，因爲一旦你調整頁面大小，播放就好了（頁面大小無關緊要，你可以調整它恢復到原始大小，它將繼續播放）。

測試網站：www.mashwork.com/testsite

見代碼：

#mashvid { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: auto; 
    min-width: 100%; 
    z-index: -5; 
} 

<video preload id="mashvid" poster="images/mashvid_poster.png"> 
     <source src="http://www.mashwork.com/testsite/video/mashwork1080.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
     <source src="http://www.mashwork.com/testsite/video/mashwork1080.ogv" type='video/ogg; codecs="theora, vorbis"'> 
     <source src="http://www.mashwork.com/testsite/video/mashwork1080.webm" type='video/webm; codecs="vp8, vorbis"'> 
     Your browser does not support the video tag. 
</video>

來源

2011-11-21 mattaningram

你可以包括你的代碼？ –

就加入它，並給網站的鏈接我的工作，所以你可以看到它是如何工作的Safari和Firefox，但不是瀏覽器。 – mattaningram

在Chrome 15.0.874.121它工作得很好 –

我有Chrome瀏覽器中同樣的問題。我將控制權添加到視頻中，並解決了問題。

我現在隱藏控制，一旦文檔已準備就緒：

$(document).ready(function() { 
    var video = document.getElementById("video"); 
    video.removeAttr("controls"); 
});

來源

2012-04-04 23:15:55

注意正確的方法是.removeAttr（） –

在調整頁面大小之前，Chrome瀏覽器不顯示HTML5視頻

回答

相關問題