Getting JW HTML5 Player to work on IE

In my continuing adventures with HTML5 video, I arrived at IE testing, and noticed that IE does not like the JW HTML5 Player (mainly because it's in beta right now). But I have to demo my site and can't wait until Version 1.0 of the player; so, I rolled up my sleeves for another non-trivial challenge.

The problem is that the current versions of IE can't display the HTML5 video tag; IE 9 will address this, but we'll be living with lower versions for some years. And the beta JW HTML5 Player doesn't remove the video tag completely from IE. The answer is to do some jQuery coding to find the video tags and replace them with swfobject elements. There are plenty of gotchas along the way as to file paths and filenames.

Here's the finished code:

<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
 </script>

<script type="text/javascript">
$(document).ready(function(){
 // If this is IE...
 if (jQuery.browser.msie){
   var el = "";
   var vidFileName = "";
   var posterPath = "";
   var videoTag = "";
   var boxId = "";
   var so = "";
   var flashId = "";
   var flashVars = "";
   var params = "";
   var attributes = "";
   var anchorId = "";
  
   // For each video element...
   $("[id^='vid-']").each(function(){
     // Clear out the variables.
     el = "";
     vidFileName = "";
     posterPath = "";
     videoTag = "";
     flashId = "";
     flashVars = "";
     params = "";
     attributes = "";
     anchorId = "";
    
     // Get a handle to the current object.
     el = $(this);
    
     // Set some variables we'll shortly.
     boxId = this.id + "_flashBox";
     flashId = this.id + "_flashPlayer";
     anchorId = this.id + "_anchor";
    
     /*
       Set the ID of the first DIV element of the current
       object's parent's parent. This will allow us to
       reference that DIV later.
     */
     el.parent().parent().find("div:first").attr("id",boxId);
    
     /*
       Loop over each 'source' tag inside the video; check
       the 'source' tag's 'src' attribute. If it contains
       'm4v' or 'mp4', then it's usable for the Flash
       player in IE.
     */
     el.parent().children("source").each(function(){
       if ($(this).attr("src").indexOf("m4v") != -1 ||
         $(this).attr("src").indexOf("mp4") != -1){
         /*
           We don't need the filename + path of the video,
           only the filename. So we remove the path and
           fetch only the filename.
         */
         vidFileName = $(this).attr("src").substring($(this).attr("src").lastIndexOf("/")+1);
       }
     });
    
     // Get the poster's filename and path.
     posterPath = el.parent().find("img").attr("src");
    
    
     // Get a reference to the video's containing DIV.
     el = $("[id="+boxId+"]");
    
     // Empty the DIV of all contents.
     el.empty();
    
     /*
       Append an anchor tag with the anchor ID to the DIV.
       We'll replace this anchor tag with the Flash player.
     */
     el.append("<a id='" + anchorId + "'></a>");
    
     // Set flashvars, params, and attributes.
     flashvars =
     {
       file:                 vidFileName,
       autostart:            'false',
       image:                posterPath
     };
    
     params =
     {
       allowfullscreen:      'true',
       allowscriptaccess:    'always',
       wmode:                'opaque'
     };
    
     attributes =
     {
       id:                   flashId,
       name:                 flashId
     };
    
     /*
       Embed the Flash player object using the swfobject.
       The embedSWF() method replaces the anchorId element
       with the Flash player. For more information on the
       various arguments, please see the documentation here:
       http://code.google.com/p/swfobject/wiki/documentation
     */
     swfobject.embedSWF('global/vid/player.swf', anchorId, '372',
       '209', '9.0.124', false, flashvars, params, attributes);
   });    
 }
});
</script>

One gotcha with swfobject: You need to ensure the path of the 'file' that you wish to play is relative to the player.swf or you'll get an error saying 'Can't find file or access denied.' This thread talks about the issue.

In addition, you'll need to add the following to the page to prevent IE from throwing an error:

if (!jQuery.browser.msie){
 $('video').jwplayer({
   flashplayer:'global/js/jwplayer/player.swf',
   skin:'global/js/jwplayer/five/five.xml'
 });
}

This ensures that the JW HTML5 Player is fired off only on non-IE browsers. My previous post on HTML5 video and the JW Player has links to all my other posts on the subject.

UPDATE: Please see part 2 of this post for how to get the release version of the player working on IE and other browsers.