Preloading .flv and .mp3 files with Flash

The company I work for does tons of online videos for our clients, and being the lead web designer I am responsible for making the videos work flawlessly and instantly. Fortunately for my clients, I am a little obsessive about finding the best of the best of the best way to do things. I have a LONG way to go, especially when it comes to flash, but here are a few choice tips and tricks that currently work for my clients.

You can read an alternate/older explanation of this method here.

Preloading files into Browser Cache

One thing I like to do that no-one can appreciate except me and maybe you is to preload the sites various .flv and .mp3 files into the site visitors cache. Let me give you an example. Site.com has 12 videos spread out on multiple pages, all are .flv files controlled by a single .swf flash video player. Most visitors arrive at the home page which has 1 of the 12 videos on it. So the trick is to preload the other 11 .flv video files from the home page. Then when the visitor goes to a different page with a different video, it loads instantly.

Preloading .flv files with Actionscript

The actionscript is easy, it opens a connection to the .flv file, sets the buffertime to 0, plays the video and immediately pauses, then seeks the position back to 0.

Its relatively easy to get this to work, heres all the actionscript you will need to preload any .flv file. Just create a new flash document, and on frame 1 enter in this actionscript. You can also search your flash help for "preloading" for more help.

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
//attach videodisplay
_level0.attachVideo(ns);
ns.setBufferTime(0);
ns.play('http://static.askapache.com/f/flv/create-boot-ini.flv');
ns.pause();
ns.seek(0);

Preloading .mp3 files with Actionscript

This is even easier than .flv! This is all you need and the mp3 file will be requested from the browser and added to the browsers cache.

var songTrack:Sound = new Sound();
songTrack.loadSound("http://static.askapache.com/f/mp3/ga-urchin-speed.mp3", true);

Little Tricks and Tips

Passing filenames with flashvars

So now you have the actionscript and files, but what if you want to pass the file using flashvars? So /preloader.swf?file=http://static.askapache.com/f/flv/create-boot-ini.flv will work?

if (!_root.file) {
  file = 'http://static.askapache.com/f/flv/create-boot-ini.flv';
} else {
  file = _root.file;
}
 
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
//attach videodisplay
_level0.attachVideo(ns);
ns.setBufferTime(0);
ns.play(file);
ns.pause();
ns.seek(0);

Using javascript to time the downloads

Now, you may think you are a hotshot if you preload 12 .flv files from the homepage using swfobject or ufo, but the problem with doing that all at once is that flash has some real serious issues with running multiple instances like that. Meaning the movie that IS on your homepage might very well FREEZE or stutter mid-play if you are trying to preload all these files in the background. I won't get into advanced stuff here but to start with you should at least utilize something like a setTimeout function. I rely heavily on javascript loops to do this.

setTimeout(function(){swfobject or ufo code;},10000); // 10 second wait

Waiting till fully buffered

Depending on your .flv video player .swf, you may or may not have the capability to receive information on whether or not a file has been loaded or is fully buffered. So an additional step that I personally take is I don't start the preloading loop code until the 1st movie on the home-page has fully buffered. Sometimes I wait until its done playing.

Apache .htaccess

Of course, I can't forget this bit of .htaccess

AddType video/x-flv .flv
AddType application/x-shockwave-flash .swf
 
<filesMatch ".(flv|swf|mp3)$">
Header unset Pragma
FileETag None
Header unset ETag
Header unset P3P
Header set Cache-Control "public"
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

Feeling Lucky?

If by lucky you mean you dig learning how to make your sites FAST, heres some money.

Easy Apache Speed Tips Articles

• Turn On Compression
• Add Future Expires Header
• Add Cache-Control Headers
• Turn Off ETags
• Remove Last-Modified Header
• Use Multiple SubDomains

August 5th, 2008

« Encrypted WordPress / phpBB BackupsElite Log File Scrolling with Color Syntax »

Comments Welcome