HTML5ビデオタグのサポートされている動画形式を検出するにはどうすればよいですか？

Question

私はビデオタグを使用してHTML5でアプリケーションを作成していますが、アプリケーションではユーザーがビデオファイルを選択してそのファイルを再生します。これはすべて、ユーザーのマシン内のそのファイルにのみリンクするため、ローカルで行われます。

ブラウザで再生できるフォーマットのみをアプリケーションで再生できるようにし、サポートされていないフォーマットでエラーを表示することを許可します。問題は、さまざまなブラウザが異なるフォーマットを再生できることです。

私はブラウザを確認して、それが再生できるとわかっているフォーマットに一致させることができますが、ブラウザが別のフォーマットをサポートするように更新するとどうなりますか？アプリケーションを新しい情報で更新する必要がありますが、サポートされているフォーマットを再生することはできません。サポートされているビデオフォーマットだけをチェックする方法はありますか？

Answer 1

異なるビデオタイプのコーデックをHTMLVideoElement.prototype.canPlayTypeで確認できます。優れたHTML5機能検出ライブラリModernizrもあります。

var testEl = document.createElement("video"), 
    mpeg4, h264, ogg, webm; 
if (testEl.canPlayType) { 
    // Check for MPEG-4 support 
    mpeg4 = "" !== testEl.canPlayType('video/mp4; codecs="mp4v.20.8"'); 

    // Check for h264 support 
    h264 = "" !== (testEl.canPlayType('video/mp4; codecs="avc1.42E01E"') 
     || testEl.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')); 

    // Check for Ogg support 
    ogg = "" !== testEl.canPlayType('video/ogg; codecs="theora"'); 

    // Check for Webm support 
    webm = "" !== testEl.canPlayType('video/webm; codecs="vp8, vorbis"'); 
} 

Answer 2

http://videojs.com/のようなものを使用することをお勧めします。彼らはフラッシュフォールバックを使用し、その構文はすべてのブラウザで使用する正しい形式の書式を提供します。

それはこのように書き：

<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>, 
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>, 
<a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a> 

ブラウザはMP4を理解していない場合、それはWebMのに行く、それはそれを理解していない場合、それはそれは、OGGに行くしない場合は、それが行きますフラッシュフォールバックに

CSSのfont-family宣言のように考えてください。