David Stiller’s blog

How to Save Bandwidth when Displaying Flash Video

I’m on the technical advisory board for Sessions School of Design, a distance learning school based in New York. Anjula Duggal, managing editor for the Sessions blog (DesignSessions: Notes on Design), recently asked me to guest author a handful of articles for them, which I’m happy to do. Thanks to Anjula and editor Katie Feo for helping to get me squared away!

My first article is here:

http://blog.sessions.edu/web-design/how-to-save-bandwidth- when-displaying-flash-video/

This entry was posted on Friday, August 17th, 2007 at 9:48 am and is filed under Flash, ActionScript 2.0, ActionScript 3.0. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

21 Responses to “How to Save Bandwidth when Displaying Flash Video”

uksal Says:
August 17th, 2007 at 5:29 pm
Hi. I learned alot from your articles. Thank you very much for sharing information about how to save bandwidth.

I have one question: Assume you have two flv files each 100MB in size. Now, when the user visits the web site, assume that the autoPlay parameter is set to false for both flvs. However, once the user clicks on play button, one of the flvs start playing. Meanwhile, the user’s computer doesn’t need to receive all flv data. After a while, all the bytes are received from the server side, but the user decided to close the browser. Nevertheless, the user’s computer received the flv file completely. So, we wasted the bandwidth. Do you think is there anyway to prevent this bandwidth waste?

Thank u
David Stiller Says:
August 17th, 2007 at 8:27 pm
uksal,

After a while, all the bytes are received from the server side, but the user decided to close the browser. Nevertheless, the user’s computer received the flv file completely. So, we wasted the bandwidth.

Aha! But once the file has downloaded, it remains in the user’s temporary Internet files until that user empties the browser cache. This is something many developers don’t seem to realize. Any file requested at runtime by a SWF — be it JPG, CSS, XML, MP3, FLV, or anything else — is downloaded to the user’s hard drive unless the request is made through streaming server software such as Adobe Flash Media Server or the open source Red5. Once that 100MB FLV is fully downloaded, it will be retrieved from the user’s hard drive — not your server — the next time it’s requested. Thus, no wasted bandwidth until the user clears the browser cache.
Nate Says:
August 23rd, 2007 at 4:33 pm
I am using your invisible button method to keep my main video from downloading. My goal is to make a video player that acts much like the one that YouTube uses. If you click on the image, the video will load, and if you click on the play button, the video will load.

I am loading a single-frame spash video when the player first opens. I have added an ActionScript cue point to the splash video that will load the main video. This way, the play button still functions. Everything works fine, the splash video loads and the play button moves to the main video, but I keep getting a 1009 error. Do you have any idea what I might be doing wrong? Here is my code:

import flash.events.EventDispatcher;
import fl.video.*;

thePlayer.source = “splash.flv”;

var theCuePoint:Object = new Object();
theCuePoint.time = 0.001;
theCuePoint.name = “main_video”;
thePlayer.addASCuePoint(theCuePoint);

function splashCuePoint(evt:MetadataEvent):void {
loadVideo();
}

thePlayer.addEventListener(MetadataEvent.CUE_POINT, splashCuePoint);

function buttonClick(evt:MouseEvent):void {
loadVideo();
}

theButton.addEventListener(MouseEvent.CLICK, buttonClick);

function loadVideo():void {
thePlayer.source = “main_video.flv”;
thePlayer.play();
theButton.enabled = false;
theButton.visible = false;
}
David Stiller Says:
August 24th, 2007 at 7:56 am
Nate,

Cool. I like your cue point approach! That’s thinking outside the box.

Offhand, I don’t see why you’d get an error of any kind, but here are a few notes on the 1009 error, on Curtis Morley’s blog.
David Stiller Says:
September 1st, 2007 at 11:56 pm
Nate,

I did a bit more digging and found a solution. It seems to be about timing, and I wish I could explain it better, but I can’t. If you give the cue point event handler just a smidgen of time to internally catch up, you can avoid the error message. Somehow the null object reference seems to be the FLVPlayback instance itself — but only when its source property is referenced (you can change its x no problem in response to the cue point, but source is persnickety, for some reason).
```
videoPlayer.addEventListener(
  MetadataEvent.CUE_POINT,
  function(evt:MetadataEvent):void {
    var t:Timer = new Timer(100, 1);
    t.addEventListener(
      TimerEvent.TIMER,
      function(evt:TimerEvent):void {
        videoPlayer.source = "actualVideo.flv";
        videoPlayer.play();
      }
    );
    t.start();
  }
);
```
Nate Says:
September 4th, 2007 at 2:29 pm
Ah, thanks for your help. As I was adding your fix to my video player, I just thought of another way to have the play button activate the next video. Rather than adding a cue point and having the player watch for that cue point, I thought to myself, “is there any way to just have the player look to see if the first video is playing?” Sure enough, there is, and here is the final code…

import flash.events.EventDispatcher;
import fl.video.*;

thePlayer.skin = root.loaderInfo.parameters.playerSkin;
thePlayer.source = root.loaderInfo.parameters.splashFile;

thePlayer.addEventListener(VideoEvent.PLAYING_STATE_ENTERED, splashCuePoint);
function splashCuePoint(evt:VideoEvent):void {
loadVideo();
}

theButton.addEventListener(MouseEvent.CLICK, buttonClick);
function buttonClick(evt:MouseEvent):void {
loadVideo();
}

function loadVideo():void {
thePlayer.source = root.loaderInfo.parameters.mainFile;
thePlayer.play();
theButton.enabled = false;
theButton.visible = false;
}
David Stiller Says:
September 18th, 2007 at 8:08 am
Nate,

Sweet! Good thinking. See, that’s one of the things I really love about Flash (and programming in general). It’s a bit like chess in that there are so many ways to solve a given problem.
Will Streeter Says:
October 17th, 2007 at 1:02 am
Hello,

First let me say this, is the first time I have posted a question, but man I really admire the work you have done. I often come here when stuck..

I am building an embeddable player with Actionscript 3.0 and need to load a bunch of thumb size picks and some vidoe clips, before I start the main video for play.

In general I need to create some type of Down Load Controller systems, because for the life of the video player on a page, it will off and on need to fetch video or images while video is playing.

I have started this process by playing a progessloading image while I do partial downloads to the browser through Loader( new UrlRequest()). For the videos I was only using partial downloads with Loader( new UrlRequest()). in other words I have been stopping the bytesloaded after 20% of it has downloaded. I am hoping that when I start the first video in the queue to play some of it would be downloaded already… the 20%. Do you know if I am on the right track… I have been doing some test and they do not look good.

Do I need to load the entire file for it to be accurately cached or will partial do?

Can I use the Loader( new UrlRequest(url) method to partial download video..

Thanks in Advance…
David Stiller Says:
October 27th, 2007 at 10:18 pm
Will,

As I was reading your question, a had the hunch that if your experiments worked at all, they’d ultimately be unreliable — and then I saw your “they do not look good” in reference to your testing, which somewhat confirmed that hunch.

I haven’t made any empirical tests, but my immediate thought is that partial downloads wouldn’t work. I have nothing to back that up with, mind you. But different browsers may handle partially cached files in different ways. Given the buffering Flash does for video, I would personally go with the buffering.
Chase Cox Says:
December 13th, 2007 at 6:03 pm
David,

First off this is a great article, but I am having some trouble trying to adapt it to my needs in a tutorial that I am putting together. Basically I have 10 seperate videos that need to be on seperate frames of the timeline and be accessible from a main menu. However, I would like the videos to load and play automatically when the user goes to the section instead of them having to click the play button. I figured that if I just put the source outside of any event handler and turned the autoplay function to true it might work, but the flvplayback component is just completely absent when I do that. There are no errors, but the video doesn’t load and play and the other components are somewhat translucent, which I guess means they aren’t active because there is no flvplayback component. So I tried to run the play() method and then placed the source just after that, but then it says it can’t find the flv. Here is the code and the error messages. Right now the video is just sitting on my desktop. Does that have something to do with it?

import fl.video.*

myVideoRCA.play();
myVideoRCA.source = “C:\Documents and Settings\ccox\Desktop\Flash Project Videos\DVD600DVDtoDV.flv”;

VideoError: 1000: Unable to make connection to server or to find FLV on server at fl.video::VideoPlayer/play()
at fl.video::FLVPlayback/http://www.adobe.com/2007/flash/flvplayback/internal::showFirstStream()
at fl.video::FLVPlayback/http://www.adobe.com/2007/flash/flvplayback/internal::handleVideoEvent()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at fl.video::VideoPlayer/http://www.adobe.com/2007/flash/flvplayback/internal::setState()
at fl.video::VideoPlayer/http://www.adobe.com/2007/flash/flvplayback/internal::httpNetStatus()
Chase Cox Says:
December 14th, 2007 at 10:04 am
Found the problem. I was just sourcing it wrong. I figured the problem was so simple that I was overlooking it.
Chase Cox Says:
December 14th, 2007 at 10:06 am
Also found out that loading the video like that doesn’t conserve file size. Why is that?
David Stiller Says:
December 14th, 2007 at 10:08 am
Chase,

Ah, good deal! Yeah, I was going to reply that Flash isn’t going to like a path that begins with “C:\”. Glad you solved it. Good for you!

Also found out that loading the video like that doesn’t conserve file size. Why is that?

It’s never the file size that gets conserved, actually — the FLV is as big as it is — the trick suggested in the article is really about deciding when to unleash that file size on the user. By default, FLVPlayback makes the FLV request even if the video is not set to autoplay. If the user ends up choosing not to watch the video, there’s no reason to have initiated that download. Does that clear it up?

It’s hard to tell when you’re testing on your local machine, in any case, because the file loads instantly. The only truly reliable test I can think of is to upload the FLV to your server.
Greg Says:
January 22nd, 2008 at 2:28 pm
I searched everywhere for a solution to the error:

“text=1000: Unable to make connection to server or to find FLV on server”

and found nothing.

I was calling a C#.net page via a querystring and returning a RTMP URL in SMIL that I want my flash player to stream. The only problem was that it worked in CS3, but not on a webpage (Firefox or IE).

I remember having to add a crossdomain.xml file at the site’s root when testing a Web Service via flash. Adding this file solved the trick. Here are the exact contents of that file: [garbled by WordPress]

Hope this helps…the solution on experts-exchange is closed and did not work for me.
David Stiller Says:
January 22nd, 2008 at 4:39 pm
Greg,

Thanks for the info! Given the nature of RTMP feeds and SMIL files (which usually feature multiple bandwidth streams), the bandwidth suggestion in this article may not apply in as meaningful a way as it does for progressive downloads, but your mention of cross-domain files is good to keep in mind.

Here’s an Adobe article on “Cross-domain policy file usage recommendations for Flash Player [9]“.
Mark Griffin Says:
January 25th, 2008 at 5:03 am
Hi David, i have an issue. I think this issue will affect many budding programmers who are implementing flash video for the first time. When I put a video file on the home page of a website I’d like it to play automatically. Fairly straight forward stuff.

The issue i’m having is if the visitor goes to another page on the site and then back to the page with the video, how can I programme the flash video to not play automatically again.

I and i’m sure many others would like to see a solution to this problem.

thanks, Mark.
David Stiller Says:
January 25th, 2008 at 8:29 am
Mark,

The least complicated solution for what you want is the SharedObject class. Check out “How to Store Persistent Data with the SharedObject Class (AS2)” for an overview of the AS2 version — it covers how to wire up a “skip intro always” button, but you could just as easily lift the essential code from hits button handler trappings.
Mark Griffin Says:
January 25th, 2008 at 9:24 am
Ok, thanks for the reply.

Much appreciated, Mark.
Jen Says:
May 7th, 2008 at 1:15 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.) I posted this question on the blog with the actual article, but then I found your blog. I’m hoping that you might find one of my posts, even though I’m posting long after most of the other comments

I have one problem with this process 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 fix 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 again!
David Stiller Says:
July 18th, 2008 at 12:12 pm
Jen,

Gosh, I’ve let a number of comments/questions falls through the cracks! Fortunately, I just checked on the sessions.edu site (the original article) and saw that I replied to your question there on May 28.

I really should have followed up here, too, back in May — but I’m hoping, in any case, that you found your answer.
Chris B Says:
November 7th, 2008 at 8:22 am
Hi - having trouble with your original code and getting this error:

1093: Syntax error….. videoPlayer.source = “nameOfVideoFile.flv”;
1093: Syntax error….. videoPlayer.source = “nameOfVideoFile.flv”;

Obviously with my videoname.flv in its place.

Using AS3.

Any ideas?!!?

How to Save Bandwidth when Displaying Flash Video

21 Responses to “How to Save Bandwidth when Displaying Flash Video”

Leave a Reply