This is a message.

Flowplayer playlist API

Learn how to modify the Flowplayer playlist using its API

standalone demo

Flowplayer 3.1.1 added addClip method to the JavaScript API. You can use this method to add new entries to the playlist at any position. The JavaScript plugin has been updated to recognize those changes and it will dynamically add new entries to the visible playlist as well. The same goes to setPlaylist and play methods which both alter the current playlist.

The fourth button Add in-stream clip adds an in-stream clip to the second playlist entry. After this button has been pressed you'll see a little 3 second "ad" on the second clip on third second. In-stream clip additions will not modify the playlist entries.

This feature has been possible before with manually configured playlists but since playlist version 3.0.6 this is possible with internal playlists as well. The key difference is that, in manual playlists, you are using DOM manipulation methods to add new entries to the playlist. In internal playlist configurations you are simply using the API method addClip to add new entries and the playlist plugin takes care of the rest. You can have a look at the playlist documentation to understand the difference between internal and manual playlists.

The buttons

// button 1: uses addClip method with position index 0
$f().addClip({url: 'KimAronson-TwentySeconds1318.flv', title: 'Girl in mall'}, 0);

// button 2: uses addClip method with position index 1
$f().addClip({url: 'KimAronson-TwentySeconds4461.flv', title: 'Twisting egg'}, 1);

// button 3: replaces the whole playlist and starts the playback from beginning
{url: 'KimAronson-TwentySeconds70930.flv', title: 'Eating Sushi'},
{url: 'KimAronson-TwentySeconds73213.flv', title: 'Things on the table'}

// button 4: adds an instream clip to the second clip
$f().addClip({url: 'KimAronson-TwentySeconds63617.flv', position: 3, duration: 3}, 1);



We define a playlist and a player container. Inside playlist we define some HTML that is used as "template" for the playlist entries.

<div class="clips" style="float:left">
<!-- single playlist entry as an "template" -->
<a href="${url}">
${title} <span>${subTitle}</span>
<!-- player container -->
<div id="player"></div>
<!-- let rest of the page float normally -->
<br clear="all"/>



Here we can see configurations for the common clip and playlist. These playlist entries will be written inside the playlist container using the HTML template.

// clip properties common to all playlist entries
clip: {
baseUrl: '',
subTitle: 'from video sharing site',
time: '20 sec'
// playlist entries
playlist: [
url: 'KimAronson-TwentySeconds59483.flv',
title: 'Palm trees and the sun'
url: 'KimAronson-TwentySeconds58192.flv',
title: 'Happy feet in a car'
url: 'KimAronson-TwentySeconds63617.flv',
title: 'People jogging'


Playlist plugin

Playlist plugin is installed with following JavaScript one liner. We enable loop property so that after a clip is finished the player automatically advances to the next clip.

// enable playlist for elements under div.clips
$f("player").playlist("div.clips", {loop:true});