Loading New Content into the Player

With the JavaScript API, it is possible to create and display a playlist of videos, simply in HTML. When your visitors click an entry in this playlist, a JavaScript call will make the player load the new file.

Demo

Select a video to start playback:

• Load the Big Buck Bunny trailer
• Load the Sintel trailer
• Load the Dutch CF commercial

Code

Here's the code for this demo. Note the jwplayer().load('url') command is all that's needed. Since autostart is enabled, the loaded video will immediately play.

<div id="container"></div>

<script type="text/javascript">
  jwplayer("container").setup({
    autostart: true,
    flashplayer: "/jwplayer/player.swf",
    height: 270,
    width: 480
  });
</script>

<ul>
  <li><a href="#" onclick="jwplayer().load('/videos/bunny.mp4')">
    Load the Big Buck Bunny trailer
  </a></li>
  <li><a href="#" onclick="jwplayer().load('/videos/sintel.mp4')">
    Load the Sintel trailer
  </a></li>
  <li><a href="#" onclick="jwplayer().load('/videos/commercial.mp4')">
    Load the Dutch CF commercial
  </a></li>
</ul>

Enhancements

Some ideas for enhancing this functionality:

• Instead of plain text, the list entries could be made more interesting by incorporating a thumbnail and the duration of the video, making the list resemble a graphical playlist.
• The currently playing video could be highlighted in the list, e.g. by assigning it a specific CSS class. When another video is clicked, the CSS class is removed again.
• Instead of just loading the file, you can also load an object with e.g. file, image and streamer. You can even load an entire playlist (either JSON or XML). See the API reference for more info.