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

This example shows video delivered as download (as opposed to streaming). Download (or progressive download as it's usually referred to) has its pro's and con's.

One advantage lies in the fact that media is delivered over http, which is unlikely to run into firewall restrictions. When (Flash) streaming your media files (using the rtmp protocol), some (mostly corporate) firewalls may block the video. Downside with downloads are higher bandwidth consumption, and slower startup (as part of the video needs to be buffered before playback can begin).