如何为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。