How to serve the correct format for html5 dynamic video?

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:

  • H.264 video encoder in javascript
  • How to get video height and width from a MP4 URL with pure ecmascript?
  • Why does this user agent JavaScript not detect Opera correctly?
  • H264 video works using src attribute. Same video fails using the MediaSource API (Chromium)
  • How to stream a raw h.264 video in jPlayer?
  • <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?

  • Why does this user agent JavaScript not detect Opera correctly?
  • H.264 video encoder in javascript
  • H264 video works using src attribute. Same video fails using the MediaSource API (Chromium)
  • How to get video height and width from a MP4 URL with pure ecmascript?
  • How to stream a raw h.264 video in jPlayer?
  • One Solution collect form web for “How to serve the correct format for html5 dynamic video?”

    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.