Loading a Playlist into the Player

With the JavaScript API, it is possible to load a new playlist into the player while it is running. This example demonstrates capturing the current playlist from the player, modifying it, and loading it back into the player. This is all done without reloading the player itself.

Demo

Click on one of the links below to add an item to the player:

• Add the Sintel trailer to the playlist
• Add the Dutch CF commercial to the playlist

Code

Here's the code for this demo. Note the calls to jwplayer().load(playlist). The playlist property can be a single object or an array of objects; each object should contain playlist item properties. The call to jwplayer().getPlaylist() returns such an array.

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

<script type="text/javascript">
    jwplayer("container").setup({
        flashplayer: "player.swf",
        height: 254,
        width: 720,
        file: "/videos/bunny.mp4",
        image: "/thumbs/bunny.jpg",
        title: "Big Buck Bunny trailer",
        'playlist.position': "right",
        'playlist.size': 270
    });
    
    function addVideo(videoUrl, videoThumb, videoTitle) {
        var playlist = jwplayer().getPlaylist();
        var newItem = {
            file: videoUrl,
            image: videoThumb,
            title: videoTitle
        };
        playlist.push(newItem);
        jwplayer().load(playlist);
    }
</script>

Enhancements

Other possible uses for loading playlist include:

• Loading a list of related videos
• Allowing the user to create a playlist on the fly