Getting JW HTML5 Player to work on IE, Part II

In part 1, we talked about getting the player working on IE with the beta version of the JW HTML5 Player. Now that version 1.0 of the JW Player is out, let's revisit the issue of getting it working on various browsers, including IE.

First off, the full release has a different syntax for initialization of the player. This code demonstrates how to set up the player for all video tags on the page as well as for IE. Don't forget to include the jwplayer.js file on the page.

$(document).ready(function(){

$("video").each(function(){
  if (jQuery.browser.msie){
    var vidFile = "";
    $(this).parent().find("source").each(function(){
      if (jQuery(this).attr("src").indexOf("m4v") != -1 ||
        jQuery(this).attr("src").indexOf("mp4") != -1){
        vidFile = jQuery(this).attr("src"); //.substring(jQuery(this).attr("src").lastIndexOf("/")+1);
        //alert("vidFile: " +vidFile);
      }
      $(this).remove();
    });
    $("[id="+$(this).attr("id")+"]").attr("src",vidFile);
  }

  jwplayer($(this).attr("id")).setup({
    events: {
        onPlay: function() {videoEventHandler(1)},
        onComplete:  function() {videoEventHandler(0)}
    },
    //debug: "console",
    players:
       [
         { type: "html5" },
         { type: "flash", src: "global/vid/player.swf" }
       ],
    components: {
      controlbar: {
        position: 'bottom'
      }
    }
  });
});


});

function videoEventHandler(type){
switch(type){
  case 1:
    stopSlider();
    break;
  case 0:
    startSlider();
    break;
  default:
    return;
}
}

You should try the above code without the if (jQuery.browser.msie){...} to see if it works for you on IE; it didn't for me so I've thrown that in. The code pulls the MP4/M4V video source and applies it to the main video tag as a src attribute. This took quite a bit of trial-and-error to discover.

Note that in the version I was using, there was a bug in Firefox: FF doesn't like the console object being called when without the Firebug window being open. IE has the console object available by default. So if you set debug: "console", you might get errors on Firefox.

In addition, when creating your video tags, ensure that the MP4 source tag comes before OGV: Chrome chokes if you have OGV first, perhaps because it can play both video types via its HTML5 implementation. Also note the event handlers attached to the video player; these are called for the AnythingSlider to stop and start.