This is a message.

Simple Playlists using Javascript

Use HTML elements to control the Flowplayer

standalone demo

In this demo, we want to make simple links (A href tags) that will play a video file in Flowplayer. While you can achieve this functionality using the playlist plugin, this implementation is much simpler and does not depend on jQuery or the playlist plugin itself.

The drawback compared to using playlist plugin is that those links are not tied to the player in any way. They simply start a movie clip from the beginning each time they are clicked. They have no states such as loading, playing or paused.

HTML

<a
href="KimAronson-TwentySeconds70930.flv"
style="display:block;width:400px;height:300px;"
id="player">
</a>
 
<div id="clips">
<a href="KimAronson-TwentySeconds70930.flv">Eating sushi</a>
<a href="KimAronson-TwentySeconds73213.flv">Random Miniature Characters</a>
<a href="KimAronson-TwentySeconds63617.flv">Small lake and a bicycle</a>
</div>
<br clear="all" />

HTML

Configuration

$f("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
 
clip: {
// use baseUrl so we can play with shorter file names
baseUrl: 'http://edge.flowplayer.org',
 
// use first frame of the clip as a splash screen
autoPlay: false,
autoBuffering: true
}
});
 
// get all links that are inside div#clips
var links = document.getElementById("clips").getElementsByTagName("a");
 
// loop those links and alter their click behaviour
for (var i = 0; i < links.length; i++) {
links[i].onclick = function() {
 
// play the clip specified in the href attribute with Flowplayer
// note: the resume call must be chained in before play()
// to work around a bug when play(clip) is called in paused state
$f().resume().play(this.getAttribute("href", 2));
 
// by returning false normal link behaviour is skipped
return false;
}
}

JavaScript