Video Playlist for Flowplayer with Javascript

Even Flowplayer gives you some plugin for playlist attribute, maybe you just want a simple playlist with just javascript.

For this purpose we can use “playlist” option.

flowplayer("player", "flowplayer-3.2.16.swf", {
			clip : {
				autoPlay : true,
				autoBuffering : true
			},
			playlist : myPlaylist
		});

In here myPlaylist is array and each object in this array should have url attribute.

var myPlaylist = [];

var video1 = {};
video1.url = "http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv";
myPlaylist.push(video1);

If you add more than one video to playlist, you will see that after first video, second one will start automatically as natural behaviour of playlist.

Other function that we expect from playlist is when user click a video in playlist, that video should start. We can write a function to understand which video has been clicked in list then we just pass that parameter to flowplayer.

<div id="clips">
		<a href="javascript:;" index="0">1. video</a>
 
		<a href="javascript:;" index="1">2. video</a>

</div>
$f('player').play(index);

Here is the full code.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Flowplayer Playlist Example</title>

<script type="text/javascript" src="flowplayer-3.2.12.min.js"></script>

</head>
<body>

	<div style="display: block; width: 520px; height: 330px" id="player"></div>
	<script type="text/javascript">
		var myPlaylist = [];

		var video1 = {};
		video1.url = "http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv";
		myPlaylist.push(video1);

		var video2 = {};
		video2.url = "http://stream.flowplayer.org/KimAronson-TwentySeconds58192.flv";
		myPlaylist.push(video2);

		flowplayer("player", "flowplayer-3.2.16.swf", {
			clip : {
				autoPlay : true,
				autoBuffering : true
			},
			playlist : myPlaylist
		});
	</script>

	<div id="clips">
		<a href="javascript:;" index="0">Video 1</a>
 
		<a href="javascript:;" index="1">Video 2</a>

	</div>
	<script type="text/javascript">
		var links = document.getElementById("clips").getElementsByTagName("a");

		for ( var i = 0; i < links.length; i++) {
			links[i].onclick = function() {
				var index = this.getAttribute("index");
				$f('player').play(parseInt(index));
				return false;
			};
		}
	</script>
</body>
</html>

Extra
After you write some css for your playlist, probably want to highlight playing item and you will add “playing” class to that item or something like that.
However, first video play automatically in the beginning, so how can you add “playing” class for that item? Here it is,

$f('player').onBegin(function(clip){
	 $("video_"+index).addClass('playing');
});

Source: http://flash.flowplayer.org/demos/scripting/anchors.html

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: