Serving the same H.264 video file to everyone, from Internet Explorer to iPhone

15 Oct 2009

In a comment on my previous post Using the HTML5 <video> tag with a Flash fallback, Rob Colburn suggested serving everyone the same H.264 video file.

The big upside is that we only need to convert the video into one format. The downside is that we lose legacy Flash compatibility and Firefox 3.5+ and Opera 10+ users get Flash instead of HTML5 video.

This can be accomplished the following JavaScript code. Note that also I've replaced JWPlayer with Flashy, a GPL-licensed alternative.

<script type="text/javascript">
  $(document).ready(function() {
    var v = document.createElement("video"); // Are we dealing with a browser that supports <video>? 
    if ( !v.play || $.browser.mozilla || $.browser.opera) { // If no, or Firefox or Opera, use Flash.
      var params = {
        allowFullScreen: "true"
      };
      var flashvars = {
        video: "video.m4v",
        poster: "snapshot.jpg",
        maintainAspectRatio: "false"
      };
      swfobject.embedSWF("videoPlayer.swf", "demo-video-flash", "480", "272", "9.0.0", "expressInstall.swf", flashvars, params);
    }
  });
</script>

Here's the example in action.