web-dev-qa-db-ja.com

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

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

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

ブラウザを確認して、再生できることがわかっているフォーマットと照合できることはわかっていますが、ブラウザが別のフォーマットをサポートするように更新された場合はどうなりますか？アプリケーションを新しい情報で更新する必要があります。その間、ユーザーはサポートされている形式を再生できなくなります。サポートされているビデオ形式だけを確認する方法はありますか？

javascripthtmlcross-browserhtml5-video
25
Cokegod

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"' );
}
48
Will

http://videojs.com/ のようなものを使用することをお勧めします。それらはFlashフォールバックを使用し、それらの構文はすべてのブラウザーで使用する必要があるフォーマットの正しい順序を提供します。

こんなふうになります：

<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に移動します。理解できない場合は、Flashフォールバックに移動します。

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

2
leopic