Example: Making Your Own Playlist Sidebar

While we do have a guide to making your own static playlist, this guide will explain how to create your own playlist sidebar by utilizing our API and a loaded RSS file. A timeline of how this process works is as follows:

  1. JW Player loads a playlist file, which contains multiple video objects and information.
  2. When the player is ready (Detected via our on('ready') API call) and finished loading this file, (Utilizing our on('ready') listener within our API) we extract information using getPlaylist()
  3. We run a loop, extracting information for each item on this playlist file.
  4. We take this information and display it via HTML

For starters, we're going to get all of our playlist information via getPlaylist(), and store the result is an array called "playlist". Then, we're going to be utilizing a for loop to run when our player is ready. We'll be determining the number of runthroughs based on the length of our playlist. (In this case, playlist.length)

for(var index=0;index<playlist.length;index++)

Within this for loop, if we invoke the an index number and then call for our appropriate property, we'll be able to pick the information we want. For example:

​playlist[index].title
playlist[index].image

will call the title and image file used in our chosen playlist item, respectively.

Since we can grab this information via javascript, we simply need to print the result into HTML. We then call our function to play the specified item.

function playThis(index) {
playerInstance.playlistItem(index);
}

The result is below. We've done some additional CSS work to make a nice playlist with description overlays.

 
 

Did you find this article helpful?

Please log in to rate this article.