How to Save Bandwidth when Displaying Flash Video
Author of this post: David Stiller | About Blog Authors »
In the last couple releases, Flash has made it very easy to put video online. From square one, there’s not much too it: with a new FLA document open, select File > Import > Import Video, click through the step-by-step Video Import wizard, and watch as your video content is effortlessly converted from a variety of file types—AVI, MOV, MPG, WMV, and more—to the format supported by Flash Player itself, which is FLV. If you use the default choices, Flash even puts a copy of the FLVPlayback component on the Stage for you, wiring it up automatically to load your new video content. The FLVPlayback component features a number of built-in skins, which provide a variety of VCR-like controls (pause/play, progress indicator/scrubber, volume slider, and the like) in numerous color schemes. Additional preferences may be configured in the Parameters tab, which becomes available when you click FLVPlayback on the Stage to select it.
As painless as the above is, there’s one snag that may cost you some unwanted bandwidth hassle. By default, the Video Import wizard sets your FLVPlayback component’s autoPlay parameter to true. This may be exactly what you want, and it does what its name implies: when the HTML page loads that has this SWF embedded, the video content plays automatically. If you’re putting together a video gallery with half a dozen Flash movies (SWF files) all embedded in the same HTML page, it’s definitely not what you’re going to want. All six videos will download at once, causing each to compete for bandwidth, and worse, will eventually play simultaneously. If these videos have audio tracks, your visitors will be in for a headache.
One solution suggests itself almost immediately. You could set the autoPlay parameter in each instance of your FLVPlayback component to false. Certainly, that would keep each video from playing automatically, but the problem is—and this is potentially bad even in pages with a single video SWF—nothing stops the FLV file from loading, even if it isn’t set to automatically begin. If a site visitor chooses not to play your video, why force that visitor to download the FLV file (and why put that strain on your server)?
Here’s another approach. Set the autoPlay parameter to false and, in addition, clear out the parameter that specifies which FLV to load. If you’re working with an ActionScript 2.0 document (see File > Publish Settings, Flash tab), the parameter will be called contentPath. If you’re working with an ActionScript 3.0 document, in Flash CS3, the parameter will be called source. In either case, find the contentPath/source row in the Parameters tab, double-click in the column that specifies the FLV file, and delete that file reference in the new window that pops up, then click the OK button.
Now it’s time to create an invisible button symbol, which you can lay overtop of the FLVPlayback component’s play button, if its skin has one, or overtop of the video area itself. You’re going to program this button to load and play the FLV file only when clicked.
1. Create a new layer in the timeline above the FLVPlayback component. Use the Rectangle tool to draw a rectangle over the video skin’s play button, or wherever else makes sense.
2. Click the rectangle to select it, and select Modify > Convert to Symbol. Choose Button from the Create New Symbol dialog box and give your symbol a name (“button” is fine), then click the OK button.
3. Select the rectangle (now a bona fide button symbol) and give it an instance name in the Property inspector. For this example, we’ll use btnStart.
4. The instance name is what puts ActionScript on speaking terms with this particular object. The FLVPlayback component will need an instance name as well, so select it and use the Property inspector to give it the instance name videoPlayer.
5. Create yet another layer, this time for your ActionScript, and click into frame 1 of that layer. Open the Actions panel (Window > Actions) and type the following code.
If your FLA document is configured for ActionScript 2.0, use this:
btnStart.onRelease = function():Void {
videoPlayer.contentPath = “nameOfVideoFile.flv”;
videoPlayer.play();
this.enabled = false;
this._visible = false;
}
If your document is configured for ActionScript 3.0, use this:
btnStart.addEventListener(
MouseEvent.MOUSE_UP,
function(evt:MouseEvent):void {
videoPlayer.source = “nameOfVideoFile.flv”;
videoPlayer.play();
btnStart.enabled = false;
btnStart.visible = false;
}
);
In either case, the ActionScript assigns a “mouse up” type event handler for the button symbol, based on its instance name. The function refers to the FLVPlayback component by way of its own instance name, telling it to load the desired FLV file and begin playing it. Finally, the same function disables the button and hides it, so as to avoid interfering with the actual play button beneath it.
But wait, why does the button need to be hidden? It’s invisible right? Well, not quite yet. Double-click the button symbol to enter its timeline. Drag the keyframe in the Up frame all the way over to the Hit frame. Doing so moves the rectangle from one of the visible frames (Up, Over, and Down) to the non-visible frame (Hit) that determines where the button is clickable.
Without any visuals in the Up, Over, or Down frames, the button becomes invisible at runtime. You still need the ActionScript as is, though, because without it even the invisible button may invisibly obstruct buttons beneath it.
August 17th, 2007 at 2:50 pm
[...] http://www.notesondesign.net/web-design/how-to-save-bandwidth … flash-video/ [...]
August 19th, 2007 at 3:07 am
[...] The post.. [...]
August 25th, 2007 at 1:25 am
nice post, really dig your theme too, keep it up.
August 29th, 2007 at 2:58 am
Nice post
August 29th, 2007 at 7:57 pm
Very nice post!
September 14th, 2007 at 8:08 pm
Excellent. Been looking for a solution to save bandwidth.. FLV looks to be the ticket.. especially since everyone uses it, etc.
h
September 14th, 2007 at 8:17 pm
Linux tips,
Keep in mind, it’s not the FLV file format per se that necessarily saves bandwidth (though FLV often weighs less than other video formats intended for Web, all settings being equal). The key is to hold off the download until the user specifically requests it.
October 16th, 2007 at 9:17 pm
we are trying to do some find a lawyer in wv how to videos on our find a lawyer in wv blog. But the FLV won’t display properly after using these tips, is there certain settings for certain browsers?
October 16th, 2007 at 9:25 pm
National,
The version of ActionScript you choose (3.0 or 2.0) will decide what version of Flash Player is needed by your viewers. ActionScript 3.0 requires Flash Player 9, but 2.0 works fine in Flash Player 6 through 9. As new players hit the scene (who knows when!?) AS2 should continue to run just fine.
When you say videos don’t display properly, can you provide specifics? Do they display at all? Have you uploaded the FLV file(s) to your server, in addition to the SWF(s)?
October 16th, 2007 at 9:34 pm
Nice tip, thanks!
October 22nd, 2007 at 9:19 am
[...] You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your ownsite. [...]
October 27th, 2007 at 2:29 am
Nice, thank you.
November 28th, 2007 at 9:14 am
Hi,
I am trying to find a similar solution for the component video list behavior .
It alows you to set up to 7 flv clips to play automatically in one video player component by listing a array of clips.
problem is it automatically downloads all videos at once giving the first videos priority.
for instance: say i have 5 flv’s lined up and a have created 5 separate play buttons it will not start loading # 5 flv until 1-4 are downloaded.
how can i make it only load only flv’s that have been requested to save unnecessary bandwidth waist?
here is the code for the set video’s behavior -flash 8 pro-:
// Set Videos Behavior
// Create a videos object to hold a video
// playlist and event handler functions…
var videos:Object = new Object();
// Set up to 7 video feeds in a single component
videos.list = new Array();
videos.list[0] = “http://www.mytowntv.org/video/jb1.flv”;
videos.list[1] = “http://www.mytowntv.org/video/jb2.flv”;
videos.list[2] = “http://www.mytowntv.org/video/jb3.flv”;
videos.list[3] = “http://www.mytowntv.org/video/jb4.flv”;
videos.loop = true;
videos.length = 1;
videos.loaded = false;
// Path to FLVPlayback components
var m = this.player;
// Set the path of the first video feed
m.contentPath = videos.list[0];
// Set a ‘ready’ event handler to load the videos
videos.ready = function( evt:Object ):Void
{
if(!this.loaded){
this.loaded = true;
for( var n=1; n
December 11th, 2007 at 8:38 pm
dj,
Looks like your code got cut off by the blog software on this site. I’m not familiar with the component video list behavior you mentioned, but all you really need to do is make sure to only specify one contentPath or source parameter at a time — that way the FLVPlayback component will only play one at a time. (To be honest, though, I can’t imagine how a single instance of FLVPlayback would be loading more than one video anyway. Do you only have one instance on the Stage?)
January 14th, 2008 at 4:37 am
Thanks for sharing these bandwidth saving solutions! Very useful for me. I became your RSS subscriber.
January 14th, 2008 at 1:33 pm
Mike,
Thanks! RSS is great, but don’t forget to browse around the existing articles too. :)
January 17th, 2008 at 2:33 am
Thanks a lot for writing the article. It helped me out today.
January 17th, 2008 at 2:58 am
Thomas,
Glad to hear it!
January 28th, 2008 at 9:31 pm
Thank you, very useful.
January 30th, 2008 at 3:56 pm
Nice solution for bandwith saving! Thanks!!
February 13th, 2008 at 5:12 pm
Very nice, well written, straight and to the point…
February 13th, 2008 at 5:21 pm
wedding, Michael, and Andrew,
Thanks!
March 29th, 2008 at 9:25 am
Interesting; thanks for the tip.
May 7th, 2008 at 2:40 pm
Hi David,
Thanks for the great tutorial. I followed your instructions and though I’m not a Flash expert at all, I was able to get my webpage, which has 7 embedded Flash videos, to work as you instructed. (I used ActionScript 2, BTW.)
However, I have one problem that I’m hoping can be fixed. Now that the FLV file doesn’t load, the progress bar of the Flash controls just spins (like a barbershop pole) as if it’s trying and trying to load but can’t. Is there any way to remove this? It may seem like a small thing, but I’m worried that visitors to the site may think that the videos aren’t loading if they see this graphic. You don’t tend to see the progress bar spinning when you visit other sites with embedded video.
I can provide a link to my page if needed. Thanks! Good post.
May 28th, 2008 at 11:56 am
Hi David,
I’m currently having the same problem as Jen. I’m assuming you didn’t get the perpetual buffer bar in your example? I’m using AS3.
I’ll probably resort to making a custom component and removing the buffer bar from it, if I can’t find a better fix.
thanks
May 28th, 2008 at 1:20 pm
Jen and Jon,
The easiest workaround I can think of is to create a very small FLV file — just a blank screen, whatever color you like, 5 frames, max — and set that small FLV as the default video. You can use the Parameters tab to do it, or precede the button event handler code with the instance name of your FLV component and a line of ActionScript:
// AS2
videoPlayer.contentPath = “nameOfShortVideo.flv”;
// AS3
videoPlayer.source = “nameOfShortVideo.flv”;
That way, your perpetual bar will stop being perpetual, because it indeed finds a file. Bandwidth still isn’t an issue — not especially — because the stand-in FLV is so tiny.
The button event handler code stays the same.
(Sorry for the delayed reply, Jen!)
November 17th, 2008 at 12:33 pm
Hi, nice topic.
I have something slightly different but related.
I wanted to have a number of flv’s loading and playing, never mind the bandwidth as they are a short preview of the full movies that can be viewed when chosen.
However I find that the flv’s load in and do not show up consistently, they just appear when they feel like it. Tempromental !
They are no more than 97k, download quickly and the controller I made runs showing that flash has actually loaded and is actually playing them.
I’m using flash MX pro (7.2) and use the MediaDisplay component and contentPath to set the movie on each instance created.
I’ve tried some things like stop and play commands on the instance after loaded complete, to try and get the screen to ‘update’ and show the movie, but nothing works.
I suspect it might be a memory issue as activity wise it can send the processor working, but regardless of that, has anyone any ideas to get the MediaDisplay to refresh, or start showing the movie it’s already downloaded.
Are their any ’secret’ MediaDisplay component calls that can get the video to display?
Cheers
November 19th, 2008 at 10:07 pm
Steve,
I haven’t used the Media components in a long time, so nothing undocumented comes to mind. I wonder if you might be running into an issue of the browser itself throttling down your HTTP requests?