HTML5 Video

This is an example of how to use the HTML5 video tag in a cross-browser fashion. The HTML5 <video> tag makes it possible to embed video clips in web pages much like how the <img> tag works for images. The browser itself provides the playback functionality without any need for plugins like Quicktime or Flash.

Currently, much debate is going on about which video codec(s) should be supported. Apple and Microsoft support H.264 while Google, Mozilla and Opera support both WebM (which has VP8 as video codec) and Theora.

In order for the video to playback in any of the above mentioned browsers, it suffices to add two source attributes to the video element, one referencing an MPEG-4 encoded file and one pointing to a WebM or Ogg encoded file.

This still leaves us with legacy browsers that don't support HTML5 and/or the <video> tag. The trick here is to degrade to Flash using javascript. The tag <video> would simply be ignored by these browsers.

If you only want to serve H.264 video's, you can use Flash fallback for the Google, Mozilla and Opera browsers as well.

The code (using jQuery) looks like this:

<div id="player">
   <video id="demo-video" poster="background.jpg" width="512" height="288" controls>
    <source src="http://demo.cdn01.rambla.be/bwcheck/bbb-1000.mp4" type="video/mp4" /> 
    <source src="http://demo.cdn01.rambla.be/bwcheck/bbb-1000.ogg" type="video/ogg" /> 
   </video>
</div>
<script type="text/javascript" src="flowplayer-3.1.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() { 
    var v = document.createElement("video"); 
    if ( !v.play ) { // If no, use Flash.
      $("#player").css("width", 512);
      $("#player").css("height", 288);
      $("#player").css("background", "url(background.jpg) no-repeat left top");
      $f("player", 
         "flowplayer-3.1.5.swf", 
         "http://demo.cdn01.rambla.be/bwcheck/bbb-1000.mp4"
        );
    }
  });
</script>;

For more info on the HTML5 video tag, read our blog post: The HTML5 "video" tag: codec confusion and how to circumvent it