How to serve the correct format for html5 dynamic video?

Question

I'm trying to find a way to serve the correct video format (I have my videos encoded in h264 and webm ) when the videos are loaded dynamically onto a canvas using the function below:

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);
}

Here is the simple html inside the body tag:

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

I could go down the user agent sniffing route to give me the correct video_path string but is there a more elegant way?

Answer 1

Modernizr is a nice way to detect browser features. It also tells you what format the video should have: http://www.modernizr.com/docs/

If video support is detected, Modernizr assesses which formats the current browser will play. Currently, Modernizr tests ogg, webm and h264.