Occasionally a project comes along that sounds SO easy, but turns out to be a big challenge. SotM loves a good challenge so we were excited when a good friend recently came to us with just such a project. The client had a folder filled with 40+ .flv files and they needed a video player that would infinitely play these videos at random. Sounds easy enough but the challenge was making this seemless so the video came across as one never ending clip.

Our first thought was the obvious simple logic. Load and play a video, then when a video completes load and play the next video. The problem with that is the slight gap you get while the request is made for the next file. The solution logic is to have two video players stacked (fp1 and fp2). One player plays a video while the second player is hidden loading the next video. Once the visible player completes, it is hidden and begins loading the next video. Meanwhile the other player is made visible and begins playing.

This is what we will be making. Let’s have a look at the code. You can download all of our source files for this simple project here.

// set a path to video files
var path:String = "flvs/";

// generate array of file names
var fileNames:Array = ["one","two","three","four"];

First create a variable ‘path’ to the flv directory. Then create an array of all the flv file names. In our final player we load these up via php and flashVars to allow the client to simply upload videos into a directory. For this example, however, we will add the names manually in an array called fileNames.

// random whole number generator
function rand(high:Number):Number {
    return int(Math.random() * high);
}

We want the videos to load at random so next we create a very simple random whole number generator.

// assign initial video source
fp1.source = path + fileNames[rand(fileNames.length)] + ".flv";

// create event listeners
fp1.addEventListener("complete", nextVideo);
fp2.addEventListener("complete", nextVideo);

Next we setup a few things. We have 2 flvPlayback components on the stage, one named fp1 and another named fp2. We want to set the initial source of fp1 to the first video in the fileNames array. The we give both flvPlaybacks event listeners that will fire our nextVideo function on complete.

var firstPlayer = true;

A boolean variable is created to tell the player which flvPlayback is currently visible and playing. If firstPlayer is true, fp1 is playing. If firstPlayer is false, fp2 is playing.

// load next random video into open player
function nextVideo(e):void {

	// var flv is created and set to a random filename in fileNames array
	var flv = rand(fileNames.length);

	// var p (play) and l (load) are set to equal fp1 and fp2.
	var p = fp1;
	var l = fp2;

	// switch var p and l if the firstPlayer is not playing.
	if (!firstPlayer) {
		p = fp2;
		l = fp1;
	}

	// toggle firstPlayer variable
	firstPlayer = !firstPlayer;

	// set p to visible and play
	p.alpha = 1;
	p.play();

	// set l to invisible,begin loading the next video and set to stop.
	l.alpha = 0;
	l.source = path + fileNames[flv] + ".flv";
	l.stop();
}

Now for the function. It’s actually pretty simple so I think the comments should explain it pretty well.

nextVideo(null);

Finally the nextVideo function is called when the .swf first loads. We have to send an argument of null because nextVideo is expecting an event via the listeners.

What we get is a simple Flash based video player that will infinitely play videos at random. Additionally we created a play/pause button, created a check to keep files from repeating back-to-back and added functionality to load file names from a directory via php. I’m happy to explain these process, just let me know.

Of course one of the neat things about coding is there is always 5-6 ways of solving any problems. What would your solution be?

We should note that there is a bit of a concern over bandwidth with a player like this. If you have 50 videos and a user leaves the browser window open, the videos will all load. If a couple thousand people do that you could easily eat up 200-300 gigs of transfer. Be careful!