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.11.swf", {
 
    clip: {
        // use baseUrl so we can play with shorter file names
        baseUrl: 'http://stream.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 href- attribute with Flowplayer
        $f().play(this.getAttribute("href", 2));
 
        // by returning false normal link behaviour is skipped
        return false;
    }
}

JavaScript