Modifying the playlist with API JavaScript Plugins - Demo 11 / 13

Introduction

Flowplayer 3.1.1 added addClip method to the JavaScript API. You can use this method to add new entries to the player's playlist on any position. The updated JavaScript plugin has been implemented 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 currently playling playlist.

The fourth button Add instream clip adds an instream 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. Instream clip additions will not modify the playlist entries.

Add clip to the beginning Add to position 2 Replace playlist Add instream clip

This feature has been possible before with manually configured playlists but since playlist version 3.0.6 this is also possible with internal playlists too. 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. Look for playlist documentation to understand the difference between internal and manual playlists.

The buttons

Here is the code for the action buttons.

// button 1: uses addClip method with position index 0
$f().addClip({url: 'KimAronson-TwentySeconds75235.flv', title: 'Two little girls'}, 0)

// button 2: uses addClip method with position index 1
$f().addClip({url: 'KimAronson-TwentySeconds75235.flv', title: 'Two little girls'}, 0)

// button 3: replaces the whole playlist and starts the playback from beginning
$f().play([	
	{url: 'KimAronson-TwentySeconds70930.flv', title: 'Eating Sushi'},
	{url: 'KimAronson-TwentySeconds72119.flv', title: 'Big spider web'}	
]);

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

HTML coding

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>
		<em>${time}</em>
	</a>
	
</div>
		
<!-- player container -->
<div id="player"></div>

Playlist entries are styled with following CSS file

Playlist configuration

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: 'http://blip.tv/file/get',
		subTitle: 'from blib.tv 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'
		}
	],

The 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});

DEMO AREA Scripting and JavaScript plugins

Flowplayer Twitter feed