Since the introduction of Flash video (flv) in 2002, Flash Player has become the most widely installed Internet video client, running on over 96% of all Internet-connected PCs. The ubiquity of Flash Player ensures that most visitors can view Flash video without downloading additional plug-ins, so you can reach more people with lower development, testing, and support costs.

Flash video can be delivered either via a streaming server, which allows for on-demand/live video, or via the more commonly used progressive download method. Progressively downloaded videos do not start until a proportion of the video has downloaded to the client, ensuring a smooth un-interupted video experience.

While this is fine and dandy, what happens when you want the entire video to download before it begins to play, or if you have several bandwidth intensive videos as is the case of our own “Meet the Team” page. In either case, preloading flv’s is not a documented feature, and it must therefore be simulated.

What follows is one method you can use to simulate preloading Flash video files, including a progress bar and percentage label.

/**
* Preloading FLVs with progressbar
*
* Actionscript developed by Bloom Media Ltd. | www.bloommedia.co.uk
* Contributors: Dominic Kelly
*/

// open a net connection
var nc:NetConnection = new NetConnection();
// null connection for progressive download
nc.connect(null);

// create a stream
myNetStream = new NetStream(nc);
myVideo.attachVideo(myNetStream);
// load video
myNetStream.play("dom-kelly.flv");
// pause video to hide it from the stage
myNetStream.pause();

// hide load progress
percentage._visible = false;
percentage._visible = false;

// resize video onload, based on meta data
myNetStream.onMetaData = function(obj)
{
	myVideo._height = obj.height;
	myVideo._width = obj.width;
	// show load progress
	percentage._visible = true;
	percentage._visible = true;
};

// listen for the 'Stop' status event, and restart the video to loop it
myNetStream.onStatus = function(info)
{
	if (info.code == "NetStream.Play.Stop")
	{
		this.seek(0);
	}
};

// create a preload interval to check load progress every 1 millisecond
myInterval = setInterval(checkBytesLoaded, 1, myNetStream);

// preload loop progress
function checkBytesLoaded(mns)
{
	// calculate percentage of video that has downloaded
	pctLoaded = Math.round(mns.bytesLoaded / mns.bytesTotal * 100);

	// update textfield on the stage
	percentage.text = pctLoaded + "%";

	// update progress bar on the stage
	progressBar._xscale = pctLoaded;

	if (pctLoaded >= 100)	{
		// the video has fully downloaded
		_root.percentage.text = "loaded";
		// play video from the beginning
		mns.seek(0);
		mns.play("dom-kelly.flv");
		// clear interval
		clearInterval(myInterval);
	}
}

And there you have it, a simple and effective flv preloader.

View the demo or download the source code.