How to preload FLV video in flash with actionscript 2.0
August 20th, 2008 | Dominic Kelly Published in Technical | 25 Comments
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.
October 13th, 2008 at 6:51 pm (#)
nice tut, but i have got a question,
how do i stop the video from looping?
October 14th, 2008 at 9:32 am (#)
@Oliver
“nice tut, but i have got a question, how do i stop the video from looping?”
To stop the video from looping, simply remove the following lines of code:
// 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);
}
};
October 28th, 2008 at 6:01 am (#)
Hi,
Thanks for the tutorial.
And i want to ask
1)how we can preload the each buffering segment of video with out loading total video.Like it’ll preload part of the video and play then again the preloader appears..
2)How can we start the buffering at a point where user drag on the seek bar.Like you tube does?
Thanx again and hope u reply
October 29th, 2008 at 9:22 am (#)
@fltofx:
“1) how we can preload the each buffering segment of video with out loading total video. Like it’ll preload part of the video and play then again the preloader appears.”
You will require a streaming server, such as Flash Media Server.
“2) How can we start the buffering at a point where user drag on the seek bar.Like you tube does?”
Again a streaming server is required for this. Progressive video loads frame-by-frame, and as such it is impossible to seek to a certain position in a video *before* it has loaded.
October 30th, 2008 at 9:50 pm (#)
Should this action script be applied to the same frame that the video clip is on or on a different frame or layer?
October 31st, 2008 at 9:12 am (#)
@Jerry
“Should this action script be applied to the same frame that the video clip is on or on a different frame or layer?”
This should not matter, so long as a) the flash video object is present on the stage *before* any of the code above is called, and b) the path to the video object in the code is valid, i.e. if you decided to place the video object inside a new MovieClip “video_mc” then the path would be:
video_mc = myVideo.attachVideo(myNetStream);
It is best practice to have all your ActionScript in the first frame (and the top layer) of your fla, or placed in an external .as file.
November 27th, 2008 at 8:32 pm (#)
nice tutorial. Is AS2 better then AS3? I’m gonna try this tomorrow, thanks so much!
Mark
November 28th, 2008 at 6:37 pm (#)
@ Mark
“nice tutorial. Is AS2.0 better then AS3.0? I’m gonna try this tomorrow, thanks so much!”
That’s a tough question, and the answer is it really depends on the project!
AS3 is more consistent as a language which makes it easier to code, it is up to 10 times faster according to Adobe and it is much better at handling events and working with display objects. For a full feature set you can check out Adobe’s ActionScript 3.0 overview.
In my opinion, the advantages of AS3.0 can be at the detriment of development time, I find that AS3.0 can require more code than AS2.0 to achieve the same result. This may be because AS3.0 is still relatively new to me, and I still need to get my head around it fully.
December 4th, 2008 at 2:41 am (#)
Hi, I am trying to do the same, a FLV preloader but in Actionscript 3.0, any chance you could guide me? I just need to know which classes are the equivalent to the ones used in AS 2.0 since I am not familiar with AS 3.0 at all.
Thanks!
December 4th, 2008 at 7:27 am (#)
Hi Jesus. You could try a AS2.0 to AS3.0 converter. While this will not be entirely accurate, it will give and idea of which AS3.0 classes you should be using.
December 18th, 2008 at 8:52 am (#)
i tried using this code with the mediadisplay component but it doesn’t work. will the code above work for that particular component or do i need to edit the code above?
December 18th, 2008 at 10:14 am (#)
@djin: My example uses the FLVPlayback component which sits in Video > FLVPlayback.
Media > I suspect media > MediaDisplay has a different set of methods (although I rarely use it), and so the code above will most likely not work without substantial modification.
December 19th, 2008 at 2:14 am (#)
@dominic
ok thanks. I’ll just use the flvplayback then. salamat!!
December 19th, 2008 at 2:18 am (#)
another thing again
regarding this code:
myNetStream.play(”dom-kelly.flv”)
1. can i just put the flv filename on the content path on the component inspector for flvplayback?
2. will this code work in conjunction with a separate listener event? the listeneer event is used for checking whether the movie has finished playing so that i will be able to activate another movieclip.
December 19th, 2008 at 11:26 am (#)
@djin
1. can i just put the flv filename on the content path on the component inspector for flvplayback?
You could try it! I try to do either everything in code, or everything in the component inspector, I don’t like mixing things up as it can get confusing later.
2. will this code work in conjunction with a separate listener event? the listeneer event is used for checking whether the movie has finished playing so that i will be able to activate another movieclip.
// 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);
}
};
This already checks to see whether the movie has stopped? So instead of this.seek(0); you could could add code to load a second movieclip?
December 19th, 2008 at 11:54 am (#)
i hope i am not annoying you with my questions but i looked at the component panel and looked at the video>flvplayback, yours looks different from the one on flash cs3. yours is white with an x on the middle while the one on flash cs3 has a black bg with lots of skins.
did you customize the flvplayback component?
December 20th, 2008 at 6:34 am (#)
i also have another question regarding this code:
// create a preload interval to check load progress every 1 millisecond
myInterval = setInterval(checkBytesLoaded, 1, myNetStream);
// preload loop progress
function checkBytesLoaded(mns)
how does the function checkBytesLoaded(mns) get data from
// create a preload interval to check load progress every 1 millisecond
myInterval = setInterval(checkBytesLoaded, 1, myNetStream);
when there is no data being sent to checkByteLoaded?
December 20th, 2008 at 2:10 pm (#)
@dji -
1.
did you customize the flvplayback component?
You know what, you’re right” I think I confused myself here with the all talk of components
I’ve used the AS2.0 video object to bind the video, not a the flvplayback component. To create a video object have a look at this screenshot:
http://jing.bloommedia.co.uk/capture/2008-12-18_0930.png (click where the arrow is pointing and choose Actionscript controlled video).
2.
// preload loop progress
function checkBytesLoaded(mns)
how does the function checkBytesLoaded(mns) get data from
// create a preload interval to check load progress every 1 millisecond
myInterval = setInterval(checkBytesLoaded, 1, myNetStream);
when there is no data being sent to checkByteLoaded?
Ok, so what happens is:
myInterval = setInterval(checkBytesLoaded, 1, myNetStream);
A variable myInterval is created to hold the setInterval() method. setInterval() takes 3 parameters - a function, a time, and an object. The role of setInterval() is to call a specified function over a specified period of time in milliseconds, and optionally an object can be passed (in this case the video).
checkBytesLoaded(mns)
So, every 1 millisecond, the checkBytesLoaded function above is called which has a parameter “mns”. mns tands for MyNetStream, and in this case is the video object. Further in the function we can access bytesLoaded property of mns, i.e.
mns.bytesLoaded
Hope that makes sense!
December 21st, 2008 at 6:11 am (#)
hello dominic!
now i get it! thank you very much for your wonderful explanation and the idea for preloading flv!
December 21st, 2008 at 10:55 am (#)
hello dominic i am back with another question
i hope you don’t mind again.
i tried using the preloading code and the AS2.0 video object. i had 4 videos to preload but a problem came up. as2.0 video object will just let me use it for 2 times. after that the blue box becomes red.
AS2.0 video object can only be used twice?
cuz i was going to use it on a project with 4 different flv files sitting on different scenes. if a user clicks on a button it goes to a specific scene where a specific video would be preloaded and then played to a the as2.0 video object.
but once i get to the 3rd scene and copying an instance of the as2.0 video object from the library by dragging it turns red and once you run the whole file and click on button and takes you to the specific scene. it jsut goes to 0% loaded all the time even if i test it on my local machine.
it will work though if you delete the 3rd as2.0 video object from the 3rd scene.
December 21st, 2008 at 1:39 pm (#)
hello again dominic!
never the question i posted above. i found the answer. it was an operator error on my part
sorry! thanks again for your help.
December 21st, 2008 at 3:34 pm (#)
@djin: Not a problem, I’m happy I could help
December 24th, 2008 at 11:56 am (#)
Thank you so much!
January 6th, 2009 at 9:36 am (#)
When I tried to open the .fla file it gave me an error saying “Unexpected file format”. I’m using Flash 8 Professional.
January 9th, 2009 at 4:04 am (#)
k.LO: You will need to upgrade to at least Adobe Flash CS3. CS4 is available on a time limited trial from http://www.adobe.com.