3

以下の関数を使用して、ビデオがキャンバスに動的にロードされるときに、正しいビデオ形式を提供する方法を見つけようとしています (ビデオを h264 および webm でエンコードしています)。

function loadVideo(video_path){
    var ctx = document.getElementById('c').getContext('2d');    
    var vid = document.getElementById('v');

    vid.src = video_path;
    vid.load();

    // play the video once it has loaded
    vid.addEventListener('canplay', function(e){
        vid.style.display = "block";
        vid.play();
    }, false);

    // hide the video container once the video has finished playing
    vid.addEventListener('ended', function(e){
        vid.style.display = "none";
    }, false);
}

bodyタグ内の単純な html は次のとおりです。

<video id="v" type="video/webm" width="960" height="500"></video>
<canvas id="c"></canvas>

ユーザーエージェントのスニッフィングルートをたどって正しいvideo_path文字列を取得することもできますが、もっとエレガントな方法はありますか?

4

1 に答える 1

4

Modernizrは、ブラウザーの機能を検出する優れた方法です。また、ビデオに必要な形式も示します: http://www.modernizr.com/docs/

ビデオのサポートが検出された場合、Modernizr は現在のブラウザーが再生する形式を評価します。現在、Modernizr は ogg、webm、および h264 をテストしています。

于 2011-11-28T10:00:23.053 に答える