ページのサイズが変更されるまでChromeでHTML5ビデオが表示されない

Question

開発中のウェブサイトの完全な背景ビデオを作成しようとしています。

私は自分のビデオタグをすべて正しく設定してあり、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> 

Answer 1

私はクロームの中に同じ問題を抱えていました。私はビデオにコントロールを追加し、問題を修正しました。

ドキュメントの準備ができたら、私は今、コントロールを非表示：

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