Make anchor links to play a movie file Scripting - Demo 5 / 7

The Goal

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. This demo was made because many people asked this question on the forums.

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.

How it's done

Here are the links that trigger the movies. We are using very basic HTML, as you can see:

<div id="clips">
	<a href="KimAronson-TwentySeconds70930.flv">Eating sushi</a> 
	<a href="KimAronson-TwentySeconds64268.flv">Hotel room with brown carpet</a> 
	<a href="KimAronson-TwentySeconds63617.flv">Small lake and a bicycle</a>
</div>

And here is the JavaScript coding:

// 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;
	}
}