Using Playlists with JW Player

This page has moved!  Please visit the new version here.

Thanks for your patience while we update our documentation.

You will be automatically redirected in 10 seconds.

 


 

Playlists

While there are certain ways to link to an external playlist file, it is also possible to configure a playlist directly into your JW Player embed. Let's jump into a few specific examples.

Creating the player

Understanding how a player functions with a single item is integral to understanding how to properly create a multi-item playlst. A single item is used here:

var playerInstance = jwplayer("player");
playerInstance.setup({
  file: 'myvideo.mp4',
  image: 'myposter.png',
  title: 'My Video',
  mediaid: '123456'
});

A single item playlist

Above, we've configured only one single item within the player with a file, poster image, and title. However, let's say that we want to create a single-item playlist. In this case, rather than specifying a file, image, and title directly, we'll be inserting these into a "playlist" config block as a playlist item. Let's look at the above code in the context of a playlist:

playerInstance.setup({
playlist: [{
  file: 'myvideo.mp4',
  image: 'myposter.png',
  title: 'My Video',
  mediaid: '123456'
}]
});

Again, since we're listing this as a single playlist item, both of our code snippets will behave exactly the same way. However, using the playlist block allows us to easily insert additional playlist items if needed.
For reference, the formatting for a playlist is as follows:

playlist: [{}, {}, ...]

A two-item playlist

So, with the above in mind, let's add a second video item to our playlist:

playerInstance.setup({
playlist: [{
  file: 'myvideo.mp4',
  image: 'myposter.png',
  title: 'My Video',
  mediaid: '123456'
},
{
  file: 'mysecondvideo.mp4',
  image: 'mysecondposter.png',
  title: 'My Second Video',
  mediaid: '234567'
}]
});

Awesome! We now have two items in our playlist.

A three-item playlist... and beyond

Any additional playlist items will follow the same convention as above. Each item (meaning a file, image, and title) will exist within {curly} brackets, separated by a comma, and all will be fully contained within a single set of [square brackets], similar to an array. Just for clarity, three playlist items would appear as:

playerInstance.setup({
playlist: [{
  file: 'myvideo.mp4',
  image: 'myposter.png',
  title: 'My Video',
  mediaid: '123456'
},
{
  file: 'mysecondvideo.mp4',
  image: 'mysecondposter.png',
  title: 'My Second Video',
  mediaid: '234567'
},
{
  file: 'mythirdvideo.mp4',
  image: 'mythirdposter.png',
  title: 'My Third Video',
  mediaid: '345678'
}]
});

Any configuration options after a playlist will still require a comma after the second square bracket similar to:

playerInstance.setup({
playlist: [{
  file: 'myvideo.mp4',
  image: 'myposter.png',
  title: 'My Video',
  mediaid: '123456'
},
{
  file: 'mysecondvideo.mp4',
  image: 'mysecondposter.png',
  title: 'My Second Video',
  mediaid: '234567'
},
{
  file: 'mythirdvideo.mp4',
  image: 'mythirdposter.png',
  title: 'My Third Video',
  mediaid: '345678'
}],
primary: 'flash'
});

So again, this is still allowed, just keep the additional comma in mind when embedding!

Sources with a playlist

Lasty, it is entirely possible to create a playlist item that has multiple sources (Either using multiple qualities or fallbacks) in conjunction with our article here. You'll need to nest your sources block in place of "file" within the playlist item. So a quick example of the structure would look like:

playerInstance.setup({
    playlist: [{
        sources: [{source1},{source2},{source3}, ...],
        image: 'myposter.png',
        title: 'My Video',
        mediaid: '123456'
},{
        sources: [{source1},{source2},{source3}, ...],
        image: 'mysecondposter.png',
        title: 'My Second Video',
        mediaid: '234567'
},{
        sources: [{source1},{source2},{source3}, ...],
        image: 'mythirdposter.png',
        title: 'My Third Video',
        mediaid: '345678'
}],
});

An actual example of this would look like with 3 different sources per playlist item is shown here:

playerInstance.setup({
playlist: [{
     sources: [{ 
            file: "myFile.flv"
        },{ 
            file: "myFile.mp4"
        },{
            file: "myFile.webm"
        }],
     image: 'image.jpg',
     title: 'This is a multisource video!',
     mediaid: '123456'
},{
     sources: [{ 
            file: "myFile2.flv"
        },{ 
            file: "myFile2.mp4"
        },{
            file: "myFile2.webm"
        }],
     image: 'image2.jpg',
     title: 'This is another multisource video!',
     mediaid: '234567'
},{
     sources: [{ 
            file: "myFile3.flv"
        },{ 
            file: "myFile3.mp4"
        },{
            file: "myFile3.webm"
        }],
     image: 'image3.jpg',
     title: 'This the final multisource video!',
     mediaid: '345678'
}]
});

Note that this same playlist structure should be used when creating JSON-formatted playlists in external .json files.

Did you find this article helpful?

Please log in to rate this article.