Implementing playlists with flow.playlist.js

flow.playlist is a JavaScript tool that you can use to implement playlists with simple HTML based syntax.

Example

Features

• The playlist is constructed with standard HTML tags and attributes. Playlist entries can contain any HTML including text and images and you can style them with CSS. Look and feel is 100% controlled by you.
• Flowplayer flash component is not initially loaded to make overall page load faster. Instead it is loaded when user clicks on the splash image or the playlist entries.
• Entries are "in sync" with the player. Try hitting pause button from the entries and from the player.
• When single clip reaches the end the next clip is automatically started.
• You can make this playlist vertical, horizontal or scrollable. It's up to you and your coding skills. Here is an example of a scrollable implmementation

Usage

Here is how our example was setup.

HTML coding

<!-- player is initially loaded with splash screen and play button -->
<a id="player">
	<img src="img/3m.jpg" />
	<div class="play"></div>
</a>

<!-- this is our playlist -->
<div id="playlist">

	<a href="http://blip.tv/file/get/N8inpasadena-Flowers457.flv">
		<p>Colorful flowers and leaves.</p>		
		<p class="time">2:04 min</p>
	</a>

	<a href="http://blip.tv/file/get/KimAronson-TwentySeconds59483.flv">
		<p>Palm trees, big building and sun</p>		
		<p class="time">0:20 min</p>
	</a>
	
	<a href="http://blip.tv/file/get/Behappy-clouds106.flv">
		<p>Sky turning gray in short time</p>		
		<p class="time">0:03 min</p>
	</a>
	
</div>

JavaScript coding

$(function() {			
	$("#playlist").playlist(
	
		// flash configuration (required)
		"../video/FlowPlayerDark.swf",
		
		// flowplayer configuration (optional)
		{initialScale:'scale'}, 
		
		// playlist configuration (optional)
		{player:'#player', loop:true}
	);
});

CSS coding

Here is our external CSS file. All visuals and layout is done with CSS as it should be. This allows you to have radically different "skins". CSS coding is actually the biggest work and it helps if you understand this powerfull "language".

Full Syntax

Here are all arguments their default values that you can supply to flow.playlist

/* 
	Select all playlist root nodes with jQuery. Entries that are 
	directly under the root noe are made as playlist entries.
*/
$("jquery selector").playlist({FLASH CONFIG}, {FLOWPLAYER CONFIG},  {

	// CSS class name of a playing entry
	playingClass: 'playing',
	
	// CSS class name of a paused entry
	pausedClass: 'paused',
	
	// jquery selector for the element where the player well be placed 
	player: '#player',
	
	// if true then playlist starts from the beginning when it reaches the end
	loop:false
});

1:st argument	are standard Adobe Flash parameters. If this argument is given as string it is intepreted as src parameter. This is the most common scenario.
2:nd argument	is an object that you can use to configure Flowplayer with these configuration variables

Download

flow.playlist.js (unpacked source code 2.2 kb)

This script requires that following JavaScript tools are included into the page.

1. jQuery JavaScript library which helps you to write code that works smoothly on different browsers.
2. flashembed.js for embedding Flash into the page

note: Working example of this tool is included into our latest build which can be downloaded here.