Как правильно настроить формат динамического видео 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); 
} 

Вот простой HTML внутри body тега:

<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.