AskApache » Search Results » preload

Preloading .flv and .mp3 files with Flash

AskApache — Tue, 05 Aug 2008 16:30:16 +0000

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
 

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"

Feeling Lucky?

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

Easy Apache Speed Tips Articles

Preloading .flv and .mp3 files with Flash originally appeared on AskApache.com

Preload flash .flv files into browser cache

AskApache — Mon, 04 Feb 2008 15:15:06 +0000

AskApache.com

Found a great way to preload and cache flash .flv video files. Recently (2006) I was hired as the lead web-designer for an insurance company website with over 30 online videos to be placed throughout the site. My area of expertise when it comes to Web Development is web-standards, and pretty much anything else open-source, NOT flash. I started programming Flash back when it first came out, version 1.x, (and I think it was called something else..) because I was learning it for my job at the ISP.. The main reason I don't spend my time learning it (although actionscript is very very rad) is because I'm not a designer. I don't have the patience for colors and images and effects, that's boring to me, especially because I'm not gifted in the art department.

My employer is a video production firm, so I use flash (for video and small Advertisements and logos) on pretty much every site I work on, now... this article shows what I learned while building the insurance site and the solutions we came up with for it.

Note: This site had only 50-100 site visitors/day and each visitor typically viewed 3-10 of the videos, so this type of aggressive caching and bandwidth-raising techniques should be looked at on a site-by-site basis.

After using the site for a month I noticed that 8 of the 30 videos on the site were being using by almost every site visitor. To speed up the site I created a very small swf (flash 7) file that uses very minimal actionscript to preload flvs specified in a preloadlist.xml file

Any page that I want the flv files to be preloaded I have to have an element with an id of "preloading" or the javascript does not load the swf file. So I set it up so that the preloading only happens when visitors goto the homepage (where they typically land), and also only when visitors haven't already preloaded the flvs. To check for this I set a cookie when the flvs are preloaded.

Note there is a newer/briefer update to this technique.

CSS for preloading

If you give an element a display:none css attribute, it doesn't work for everyone. Once the swf loads you can of course change it to none as the preloader initiates the requests onload.

#preloading {position:absolute; bottom:0;left:0; display:block; width:1px; height:1px; overflow:hidden; z-index:1;}

XHTML for preloading

This just starts the preloadflv function AFTER the HTML file has been loaded... (nowadays I ONLY do unobtrusive javascript and keep everything in an external .js) Also note that some browsers/flash versions need the preloading span element to be at the top of the html if your html page scrolls down past the window's viewable area.

Actionscript for preloadflv.fla

This is literally the whole file, I spent weeks researching to come up with this optimized and customized swf prefloader. One useful feature is by using the external .xml file you can preload any files dynamically. Just make sure you setup the caching correctly, don't cache the xml file for very long! To really appreciate this preloader you should definately use an HTTP capture program like WireShark and also watch your Apache access logs on your server.

var netPath:NetConnection = new NetConnection();
netPath.connect(null);
var ncPreLD:NetStream = new NetStream(netPath);
var i:Number = 1;
var preloaderXML:XML = new XML();
preloaderXML.ignoreWhite = true;
preloaderXML.onLoad = function(success:Boolean):Void  {
  if (success) {
    var flvFiles:Array = preloaderXML.firstChild.childNodes;
    var flvDir:String = preloaderXML.firstChild.attributes.basedir;
    ncPreLD.play(flvDir+preloaderXML.firstChild.childNodes[0].attributes.path+".flv");
    ncPreLD.onStatus = function(infoObject:Object):Void  {
      if (infoObject.code == "NetStream.Play.Start") {
        ncPreLD.pause();
        if (i



XML file preloadlist.xml
Save this file in the directory of your preloader (unless you modify the .fla) and basically just list all the files to preload from the basedir url.


  



NetStream
The NetStream.onStatus

NetStream.Buffer.Empty
statusData is not being received quickly enough to fill the buffer. Data flow will be interrupted until the buffer refills, at which time a NetStream.Buffer.Full message will be sent and the stream will begin playing again.
NetStream.Buffer.Full
status The buffer is full and the stream will begin playing.
NetStream.Buffer.Flush
status Data has finished streaming, and the remaining buffer will be emptied.
NetStream.Play.Start 
status Playback has started.
NetStream.Play.Stop
status Playback has stopped.
NetStream.Play.StreamNotFound
error The FLV passed to the play() method can't be found.
NetStream.Seek.InvalidTime
error For video downloaded with progressive download, the user has tried to seek or play past the end of the video data that has downloaded thus far, or past the end of the video once the entire file has downloaded. The message.details property contains a time code that indicates the last valid position to which the user can seek.
NetStream.Seek.Notify
status The seek operation is complete.




.htaccess flash and flv
Make sure apache sends the correct content-type headers with the swf and flv files
AddType video/x-flv .flv
AddType application/x-shockwave-flash .swf


Implement HTTP Caching
Please see: .htaccess Caching Tutorial
# 1 YEAR

Header set Expires "Mon, 27 Mar 2038 20:59:12 GMT"
Header set Cache-Control "max-age=29030400"

# 1 WEEK

Header set Cache-Control "max-age=604800"

# 3 HOUR

Header set Cache-Control "max-age=10800,must-revalidate"
Preload flash .flv files into browser cache originally appeared on AskApache.com