Preload External FLV in Flash

So I was tasked with solving a unique issue – I need to create a video player that preloads a FLV in FULL before beginning playback.  This is to ensure that regardless of where the actual FLV is hosted, all users worldwide will experience seamless playback, with high quality video.  Here is how I did it.

So i cannot include the actual source file due to legality issues.  But  can provide the actual WORKING code.  Yes it is working, and tested.  The code will assume you set up your flash file the right way, so let me go over a few checkpoints here.

- The File is set up for ActionScript 2.0
- It includes a progress bar (progressBar) as well as a percentage loaded text field (percentageTxt)
- It auto plays after load
- It does not loop the video
- The “external Video” on the stage is named “myVideo”
- video2.flv is my flv.  Replace it with the correct name and path to your own.
- I have a movie clip named “btn_playpause”  I have the pause graphic in frame one, and the play graphic in frame 2.  I have a “stop” action-script on both frames 1 and 2.  Doing this will allow the code below to work.
- The mute button is rigged.  I have the mute button named “sound_btn” (a movieclip) with an empty second frame.  So when you click the button, it plays that movie clip into an empty frame.  This shows the second sound button below it (named sound_btn2).  Tough to follow, so email me if you have questions.
- my fast forw3ard rewind are named “seek_ahead” and “seek_bhnd”.  They are movie clips on the main timeline as well. 
- I have two dynamic text fields on the stage as well, “timet” which is the total time of the FLV, and “time_txt” which is the amount of time that has played, and counts as the flv plays. 

 

As always, let me know if you have questions.  The code does work if you set it up right….

/**

* Preloading FLVs with progressbar

*/

 

// 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(“video2.flv”);

 

// pause video to hide it from the stage

myNetStream.pause();

 

// resize video onload, based on meta data

myNetStream.onMetaData = function(obj)

{

myVideo._height = obj.height;

myVideo._width = obj.width;

// show load progress

percentageTxt._visible = true;

percentageTxt._visible = true;

};

 

// listen for the ‘Stop’ status event, and stop video from looping

myNetStream.onStatus = function(info)

{

if (info.code == “NetStream.Play.Stop”)

{

this.seek(0);

btn_playpause.gotoAndStop(2);

this.pause();

}

};

 

// 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

var pctLoaded = Math.round(mns.bytesLoaded / mns.bytesTotal * 100);

 

// update textfield on the stage

percentageTxt.text = pctLoaded + “%”;

 

// update progress bar on the stage

progressBar._xscale = pctLoaded;

 

if (pctLoaded >= 100) {

// the video has fully downloaded

_root.percentageTxt.text = “loaded”;

// play video from the beginning

mns.seek(0);

mns.play(“video2.flv”);

 

 

//play/pause button

btn_playpause.onRelease = function() {

  mns.pause();

  btn_playpause.play();

}

 

//mute button

var globalVolume:Sound = new Sound();

 

sound_btn.onRelease = function():Void {

 globalVolume.setVolume(0);

 sound_btn.play();

}

sound_btn2.onRelease = function():Void {

 globalVolume.setVolume(100);

 sound_btn.play();

}

 

 

//fastforward/rewind

var id:Number;

 

seek_ahead.onPress = function():Void {

 id = setInterval(function():Void {

    mns.seek(mns.time + 0.5);

  }, 100);

}

seek_ahead.onRelease = function():Void {

  clearInterval(id);

}

 

seek_bhnd.onPress = function():Void {

  var dest:Number = mns.time;

  id = setInterval(function():Void {

    mns.seek(dest -= 2);

  }, 100);

}

seek_bhnd.onRelease = function():Void {

  clearInterval(id);

}

 

 

 

// clear interval

clearInterval(myInterval);

}

//show time

//this gets my duration

mns.onMetaData = function(metadata) {

duration = metadata.duration;

var dur_seconds:Number = duration;

var minutes_dspl = Math.floor(dur_seconds/60);

var seconds_dspl = Math.floor(dur_seconds%60);

if (minutes_dspl<10) {

minutes_dspl = (“0″+minutes_dspl);

}

if (seconds_dspl<10) {

seconds_dspl = (“0″+seconds_dspl);

}

//timet is the variable name for the text field

timet.text = minutes_dspl+”:”+seconds_dspl;

};

 

var time_interval:Number = setInterval(checkTime, 500, mns);

function checkTime(mns:NetStream) {

   var ns_seconds:Number = mns.time;

   var minutes:Number = Math.floor(ns_seconds/60);

   var seconds = Math.floor(ns_seconds%60);

   if (seconds<10) {

      seconds = “0″+seconds;

   }

   time_txt.text = minutes+”:”+seconds;

}

}

You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.
7 Responses
  1. stevetapp says:

    Do you have the same solution for AS3?

    Thanks,
    Steve

  2. admin says:

    Steve,

    Unfortunately, I do not have an AS3 solution. Is there a particular reason you would like to use AS3 for the project?

    If I can help, I certainly will.

    Thanks!

  3. Eugene says:

    Hi,
    My question is – what is “The “external Video” on the stage” and where on the stage it placed?

    Mabe that’s why I can’t see my video. The sound plays but video doesn’t.

    Thanks in advance.
    Eugene

  4. admin says:

    Eugene,

    The external video is just that – it is external, so it is not within the movie. Yet on the stage is a video playback component named”myVideo”. That is the instance name.

    Give that a try…

    Thanks!

  5. G Blocker says:

    Thanks for this, but I seem to be having the same problem as the previous guy. I can hear the audio, but the video is not showing. I am using a FLV Playback component with the instance name of myVideo, but it is still not showing, nor is the timet or time_txt fields changing. The timet var shows how long the duration is but the time_txt just shows 0:00. Any clue on what I am doing wrong? Thanks.

  6. JHall says:

    Same issue here. That’s 3. Too bad. This was looking to be very helpful. I hope to see an addendum soon. Thanks for the efforts!

  7. admin says:

    Do all of you guys have your actionscript set up to 2.0? or 3.0? It should be set to 2 for this to work….

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>