すべてのブラウザで動画をサポートしていますか？

Question

バックグラウンドビデオ（.mp4）を利用するウェブサイトを構築しましたが、一部のブラウザでは再生できないことがあることに気付きました。サポートされているファイルタイプを追加できる方法があるかどうか疑問に思っていました。表示されない場合は、次のファイルタイプが代わりに再生されます。

私は、3つのファイル形式（.ogg/.ogv？）、（.mp4）と（.webm）のビデオはcaniuseのように見えますが、そのすべてがサポートされています。私の質問は、私はちょうど私が後に行くこのフェイルセーフのアプローチを達成するために別のソースとしてHTMLにビデオを追加できますか？

これは私が私のビデオプレーヤーがセットアップされている方法です。

<video autoplay loop class="fillWidth"> 
    <source src="" type="video/mp4" width="1024" height="768" />Your browser does not support the video tag. I suggest you upgrade your browser. 
</video> 
<div class="poster hidden"> 
    <img src="" alt=""> 
</div> 

ユーザーがモバイルである場合には、私はビデオやポスターのための.pngにロードするためにsource属性でvideoタグを使用します、私はちょうどsourceの異なる2つのvideoタグを追加することができますか？これを実現するよりエレガントな方法はありますか？このよう

：

<source src="" type="video/ogv" width="1024" height="768" /> 
<source src="" type="video/webm" width="1024" height="768" /> 

は私が助けに感謝します！

Answer 1

ただ1つのビデオタグと複数のソースタグを使用してください。ブラウザが適切なソースを選択します。

例：

<video autoplay loop class="fillWidth"> 
    <source src="vid.mp4" type="video/mp4" width="1024" height="768" /> 
    <source src="vid.ogv" type="video/ogv" width="1024" height="768" /> 
    <source src="vid.webm" type="video/webm" width="1024" height="768" /> 
    Your browser does not support the video tag. I suggest you upgrade your browser. 
</video>