Example: Loading New Playlists

For this example, we'll be constructing a static playlist via HTML and javascript. Since this is technically not an actual playlist to JW Player (Since we're not using the 'playlist' config option), this can be the first step to dynamically create playlists 'on-the-fly'. A step-by-step breakdown is explained here:

  1. User clicks a link and sends the video and image URLs to the playTrailer() function.
  2. playTrailer() then inserts these variables into our load() API method.
  3. load() will then load these objects into JW Player and play.

Essentially, we are loading each video into the player as its own playlist. Let's break down the steps:

1 - Clicking the thumbnail and calling our function

Clicking a video thumbnail will invoke the following javascript. Here, we'll be passing video1.mp4 as our media file, and image1.png as our poster image into our playTrailer() function.

​<a href="javascript:playTrailer('video1.mp4', 'image1.png')"><img alt="" border="0" src="thumbnail1.jpg" /></a>

The above example will pass video1.mp4 and image1.png into the player via our function.

2 - the playTrailer function

playTrailer() will now take these file URLs that we've passed over and replace the video and thumb variables in our load() method:

function playTrailer(video, thumb) { 
    file: video,
    image: thumb

3 - loading and playing

After loading our video and thumbnail, the player will now use our play() API method to start playback. In the event that you'd prefer a manual start, simply remove this section. The user will then need to invoke a play themselves.


To see the above code in action, take a look at our live example here:

Did you find this article helpful?

Please log in to rate this article.