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.







