Loading YouTube/Soundcloud playlists in JW Player

Player library

Currently using: JW 7.2.4
JW 6.12 | JW 7.1.5 | JW 7.2.4

The YouTube Data API (v2) has been officially deprecated as of March 4, 2014.

This basically means that any JW Player implementation which uses a YouTube playlist for it's source (in the format shown below) will now fail to load:

  jwplayer("example").setup({
  ...
  "playlist":"http://gdata.youtube.com/feeds/api/playlists/xxxxxxxxxxxxx",
  ...
  }

Introducing Tubey for JW Player

Tubey is a JW Player plugin which, with a slight tweak to your configuration, will allow you to continue to load YouTube playlists, and adds additional functionality to load Soundcloud playlists.

It also provides the ability to merge multiple YouTube/Soundcloud playlists into one and then sort or shuffle them before playing.


Getting started with Tubey for JW Player

Step 1 - Remove the playlist parameter from the JW Player setup block and instead add "file":"use-tubey" and "type":"youtube", as follows:

  jwplayer("example").setup({
  ...
  "file":"use-tubey",
  "type":"youtube",
  ...
  }

Step 2 - Add a plugins block as follows:

  jwplayer("example").setup({
  ...
  "file":"use-tubey",
  "type":"youtube",
  "plugins": {
    "http://www.dev.powered-by-haiku.co.uk/solutions/tubey/code/tubey.js":{
      "playlist":"xxxxxxxxxxxxx"
    }
  }
  ...
  }

Where the xxxxxxxxxxxxx above is replaced with just the ID of the YouTube/Soundcloud playlist you wish to load - for example "playlist": "PLC0B137D835A3C970"

Alternatively, you could use an array of YouTube/Soundcloud playlist IDs, as follows "playlist":["xxxxxxxxxxxxx","yyyyyyyyyyyyy","zzzzzzzzzzzzz"] in order to load and merge multiple playlists together.

Sort or Shuffle merged playlist

Possible options for the sort parameter are shuffle, ascending and descending. If you don't include this setting the JW playlist will appear in the order the playlists are returned from YouTube/Soundcloud.

  jwplayer("example").setup({
  ...
  "file":"use-tubey",
  "type":"youtube",
  "plugins": {
    "http://www.dev.powered-by-haiku.co.uk/solutions/tubey/code/tubey.js":{
      "playlist":"xxxxxxxxxxxxx",
      "sort":"shuffle"
    }
  }
  ...
  }

Step 3 - Whilst the playlist is being loaded, a temporary playlist item is displayed to indicate this.

This consists of a default poster image, title and description which you may be happy to leave, or you can override as follows:

  jwplayer("example").setup({
  ...
  "file":"use-tubey",
  "type":"youtube",
  "plugins": {
    "http://www.dev.powered-by-haiku.co.uk/solutions/tubey/code/tubey.js":{
      "playlist":"xxxxxxxxxxxxx",
      "image":"<URL to your image>",
      "title":"Loading playlist...",
      "description":"Please wait..."
    }
  }
  ...
  }

That's it!

PS: If you'd like to extend your JW playlist functionality further, you may also be interested in Listy for JW Player.