jwTube: Making JWPlayer 6 work with YouTube in HTML5 mode

Posted on by

UPDATE: With the recent release of JW6.9 (30th June 2014) the JW Team have fully integrated the YouTube iFrame API into the player. As a result jwTube should not be used with JW6.9+ as the two don’t play well together!

With the recent update of Apple’s iOS to version 7, JW Player implementations that use YouTube as a media format have started to experience issues.

YouTube issue in JW Player on iOS7

The main problem is that YouTube videos appear to halve in height – even though the JW Player container remains the correct height.

The JW Player team have acknowledged this to be an issue, and have stated that it will be addressed in JW 6.8 – which is not likely to be available until early 2014.

UPDATE: This has now been resolved in JW6.8 (released 6th Feb 2014), however JW playlists and event hookup in HTML5 mode are still missing.

 

In order to fill the void between now and then, I have developed a “patch” to resolve this issue.

Whilst I was at it, I also decided to address a few other JW Player 6 + YouTube + HTML5 mode annoyances, such as:

  • Allowing playlists on iOS
  • Allowing merged/mixed playlists
  • Controlling YouTube volume using the JW Player control bar
  • Exposing YouTube events to JW Player
  • Support for modern Android devices (since v1.4)

Using jwTube

The basic implementation is very simple:

1) Download the jwTube patch.

You can get the jwTube patch here.

2) Load the patch after JW player

Include a link to the jwTube patch in your page <HEAD> after the jwplayer.js library, for example:

<!-- JW Player Library -->
<script src="[/path/to/jwplayer]/jwplayer.js"></script>
<!-- jwTube patch -->
<script src="[/path/to/jwtube]/jwtube.min.js"></script>

3) Enable jwTube

If you are using jwTube version 1.4 or greater, then that’s it – there is no longer any additional configuration required. jwTube will make use of your existing configuration parameters to build mixed/merged playlists, and will automatically select the relevant mode for your device/platform.

Examples of using jwTube v1.4 can be found here.

NOTE: Dynamically added JW Players still require a call to jwtube.patch(player) immediately after the .setup({...}) call, passing the resulting JW instance as the player parameter.

 

If you are using versions earlier than v1.4 then some additional configuration is required in order to apply the jwTube patch:

  • Use the "file": syntax to reference your media – whether they are individual YouTube videos or a playlist
  • Include "type":jwtube.setType() as part of the main setup configuration (for single files) or for the first playlist item in an inline playlist – at the same level as the "file" parameter.
    • If you’d prefer JW Player to only be put into HTML5 mode when on iOS7 – giving a better default experience for PC users – use this setting instead: "type":(jwtube.iOSVersion()>=7?jwtube.setType():"youtube")
  • Do not include the "primary" parameter as part of the main setup configuration
  • For dynamically added JW Players, call jwtube.patch(player) immediately after the .setup({...}) call, passing the resulting JW instance as the player parameter

More specific examples of using earlier versions can be found here.

Hooking up events

Once the JW Player has been patched, you can hook into the YouTube “play”, “pause” and “buffer” events using the following approach:


<script type="text/javascript">
  jwplayer("container").setup({
    "title":"Danny Macaskill - Industrial Revolutions",
    "description":"Industrial Revolutions is the amazing new film from street trials riding star Danny Macaskill. Filmed and edited for Channel 4's documentary Concrete Circus by Stu Thomson from http://www.CutMedia.com",
    "image":"danny_macaskill.jpg",
    "width": "50%",
    "aspectratio":"16:9",
    "file": "http://www.youtube.com/watch?v=ShbC5yVqOdI",
    "type":jwtube.setType()
  });
  // Due to a bug in JW6.7, we have to re-get the player instance
  var jwp = jwplayer("container");
  jwp.ytOnPlay = function(player){
     // YouTube video is playing
  };

  jwp.ytOnPause = function(player){
     // YouTube video is paused
  };

  jwp.ytOnBuffer = function(player){
     // YouTube video is buffering
  };
</script>

jwTube for WordPress

In order to get jwTube working with the JW Player WordPress Plugin, I’ve had to create an alternative patch file.

This needs to be loaded into the HTML Head of your WordPress template.

You can get the jwTube for WordPress patch here.

Additionally, you need to include the following tag as part of the JW Plugin shortcode:

jwtube="powered-by-haiku.co.uk"

for example

jwplayer mediaid="xxx" jwtube="powered-by-haiku.co.uk"

results in the following:

[jwplayer mediaid=”602″ jwtube=”powered-by-haiku.co.uk” controlbar=”true” test=”jh”]

NOTE: I have restricted this to only modify the JW Plugin behavior on iOS7.

Comments are closed.