如何为 html5 动态视频提供正确的格式？

Question

当使用以下函数将视频动态加载到画布上时，我正在尝试找到一种方法来提供正确的视频格式（我的视频以 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 字符串，但有没有更优雅的方法？

Answer 1

Modernizr 是检测浏览器功能的好方法。它还告诉你视频应该有什么格式：http://www.modernizr.com/docs/

如果检测到视频支持，Modernizr 会评估当前浏览器将播放哪些格式。目前，Modernizr 测试 ogg、webm 和 h264。