This is a message.

Playlists with different media

Learn how to use the Flowplayer playlist plugin with different media types

standalone demo

Here we have an internal playlist similar to this demo. This time we are using the playlist plugin which makes those playlist entries clickable beside the player.

HTML

<!-- root element for playlist entries -->
<div class="clips" style="float:left;margin-right:15px">
 
<!-- single playlist entry as an "template" -->
<a>
${title} <span>${url}</span>
<em>${duration} seconds</em>
</a>
 
</div>
 

<!-- player container with a splash image -->
<a id="flowplayer">
<img src="/media/img/tutorial/tap-splash.jpg"
alt="Playlist splash image" />
</a>
 
<!-- let rest of the page float normally -->
<br clear="all" />

HTML

Configuration

The JavaScript code is identical to the first example with the exception that we set up a title property to each entry so that we can label our playlist entries. Here is our modified JavaScript configuration with title attributes.

// set up player
$f("flowplayer", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
// properties that are common to both clips in the playlist
clip: {
// by default clip lasts 5 seconds
duration: 5
},
 
// playlist with four entries
 
playlist: [
 
// JPG image
{title: 'JPG Image', url: "/media/img/tutorial/tap-splash.jpg"},
 
// SWF file
{title: 'Flash file', url: "/media/swf/clock.swf", scaling: 'fit'},
 
// video
{
title: 'A video file',
baseUrl: 'http://stream.flowplayer.org',
url: 'KimAronson-TwentySeconds58192.flv'
},
 
// audio, requires audio plugin. custom duration and a cover image
{
title: 'MP3 Audio',
url: "/media/data/fake_empire.mp3",
duration: 25,
coverImage: "/media/img/demos/national.jpg"
}
 
],
 
// show playlist buttons in controlbar (in addition to other buttons)
plugins: {
controls: {
playlist:true
}
}
 
// set up a HTML playlist to work inside DIV whose class name is "clips"
}).playlist("div.clips", {loop:true});

JavaScript