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