JW5 & JW6 Co-existence

Posted on by

As the web’s most popular video player, the use of JW Player in content management systems is as deep as the web is wide.

To date, most of these implementations are based on JW Player version 5 and therefore have JW5 and media specific embedding techniques: using the OBJECT, EMBED or VIDEO tag.

With the recent release of the latest version of JW Player (JW6) you naturally expect a few issues to surface when it comes to upgrading, however, you’d also expect a bit of direction from the makers of the product in order to ensure this process is as painless as possible – especially when you consider:

  • Some sites have been embedding JW5 videos for years – and they have hundreds of videos embedded using “legacy” techniques
  • LongTail Video in their wisdom have removed all but the JavaScript method for embedding – and even this they have changed quite substantially
  • Official support for JW5 is likely to disappear within the next 18 months

Unfortunately it would appear that with all the changes happening within the Longtail/JW camp and their desire to get JW6 rolled out, they have taken their eye off the ball, and in doing so appear to have shown a complete lack of consideration towards their established user-base.

To expect users to re-visit the embed code of every previous video hosted on their template driven site, just so they can upgrade to the more expensive and less functional version of JW Player is hugely narrow-minded.

Following on from a post I saw in the JW Player support forums relating to this issue, I decided to have a crack at developing a low impact solution to having JW5 and JW6 co-exist across an established site.

This is an example of how to get JW Player working with:

  • JW5 for pages with a legacy VIDEO, OBJECT or EMBED setup
  • JW6 for pages with the new JS only embed approach
  • Whilst maintaining a single HTML Head template – used by BOTH sets of pages.

NOTE: It requires modifying the “jwplayer.js” file that is used by the existing JW5 embed methods.

Although this may sound undesirable, there is a low risk of this file changing through official channels in the future.

Let’s do this!

Step 1

  • Open the “jwplayer.js” file provided as part of the JW5 install in notepad
  • Find and replace all instances of “jwplayer” with “jwplayer5“
  • Find and replace all instances of “$jw” with “$jw5“
  • Save and rename the file to “jwplayer5.js” in it’s original directory

Step 2

Update the HEAD of your HTML Page Template to include the following (this assumes JW6 is available to be linked to either on your server or from a CDN):


<script type="text/javascript" src="[/original/path/to/jw5]/jwplayer5.js"></script>

<script type="text/javascript" src="[/new/path/to/jw6]/jwplayer.js"></script>

Step 3

Include the following additional script in the HEAD after the two jwplayer library references:


<script>
(function(){
var xmlHTTP;
var sURL = self.document.location.href;
if (window.XMLHttpRequest){ xmlHTTP=new XMLHttpRequest(); } else {xmlHTTP=new ActiveXObject("Microsoft.XMLHTTP");}
try{
xmlHTTP.open("GET",sURL,false);
xmlHTTP.onreadystatechange=function(){
if(xmlHTTP.readyState!=4){ return; }
if (xmlHTTP.status==200){
var sRet = xmlHTTP.responseText.toLowerCase();
// ** Modify this line to include specific conditions to switch to JW5 **
if(sRet.indexOf('<'+ 'video ') > -1 || sRet.indexOf('<'+ 'embed ') > -1 || sRet.indexOf('<'+ 'object ') > -1){
jwplayer = null;jwplayer = jwplayer5;$jw = null;$jw = $jw5;
} else {
jwplayer5 = null; $jw5 = null;
}
if(top.console) console.info(jwplayer.version);
} else {
alert('Are you using this locally? It doesn't work unless on a server!');

}
};
xmlHTTP.send(null);
} catch (e) {
// TODO: handle exception
}
})();
</script>

That’s it!

Modify the line indicated in the above script, as required, to determine what it is you wish to use as a trigger to switch to JW5.

The following two pages demonstrate the dynamic switching between JW versions:

With VIDEO tag (loads JW5) | Without VIDEO tag (loads JW6)

Comments are closed.