I recently had a client ask me to make them a flash video player that would stream video. I wasn’t really sure how to do that so I did some research and found some interesting information on it. Firstly, I think the internet community is a bit confused about the ‘Streaming’ term at the current time. Even Macromedia was at the Flash 6 stage. If you do a search for streaming video in google you get all sorts of responses. However, their are two main technologies that are at work in the online video world, that is, Progressive Download and Streaming.

Progressive Download vs Streaming
Most people are used to the Progressing Download technique that flash natively handles, you can see them at work on YouTube or Google Video or mostly any major online video site thats probably because its cheap and easy since flash handles it natively. Progressive Download means that the video will download from the beginning to the end and you can only watch what has currently been downloaded to your computer. This also means that the person will end up recieving the entire video on their computer and can do whatever they want with it. This can be risky for some people if they are worried about copywrite stuff. Streaming has a few other technical possibilities. It allows you to view any part of the video, even parts that have not yet been downloaded, it just takes a few seconds for the video to download enough of the video from that point onward before it can start being viewed. It also clears any previously viewed video from the computer making it so the end user doesn’t download the video to their computer, aleviating any consern you might have dealing with copywrited material. Streaming is also necessary if you want to play a long video like 10 or more minutes and think the user might need to see parts of it before it has been downloaded, which my client had.

Examples
This is an example of the two types of video techniques used in the flash video player component I built. Drag the scrub bar to see the difference…

Progressive Downloaded Video

Streaming Video

Streaming Servers
Since flash doesn’t stream video natively, you need to setup a streaming server that works with flash. The most common form of these is the Flash Media Server, but a few other options are also available like Wowza Media Server or Red5. FMS costs $4500 which might make it impracticle for some clients but has a free developer version for being able to setup and test it. Wowza on the other hand offers a free version for up to 10 concurrent users which is more my style. Red5 is all around free since it is open source but I didn’t find it to be the most practicle because it lacked support and any real documentation.

The end client on this project seemed to have a fair bit of cash on hand so they asked me to set it up to work with several different options. So after a little bit of tinkering I was able to install FMS on my PC (They don’t seem to have an OSX version – boo), without much more effort I installed Wowza on my Mac (they support pretty much every OS).

I already had made a fairly robust flash video component and wanted to use it because of how it handles the scrub bar and integrates easily with my Model View Controller setup. The real issue for me was finding enough documentation to get the streaming video to work with a custom video player. Everything I found seemed to work mostly for the Adobe FLV Playback component. But since I’m not a quitter, I kept at it and managed to figure out how to get it working. Their really wasn’t that much to change with my video component either.

Setting Up the Server
Here’s how I did it… It really works the exact same way for both FMS and Wowza, I will refer to FMS since it is probably the most widly used, but I actually prefer Wowza since I can get away with using the free version because my friend count on my site is fairly low (Don’t be hatin). For this excercise I’m going to assume you know how to do progressive video and have a player already built. Sorry but I’m lazy and don’t have the time to explain how to build one.

After you install FMS, go to the install directory and inside the applications directory you need to create a directory, give it a name of the project your working on (I will call it ‘foobar’ for my example). Inside foobar create another directory called ’streams’. Inside streams create another directory called ‘_definst_’. Inside that directory you need to put your video (my video is called video.flv). When you create your flash video player it will request the video from that location to play. Wowza has an applications directory and you do the exact same thing. The biggest thing that took most of my time was figuring out how to target that video from your video player. I will make it easy on you. FMS and Wowza and probably most others use port 1935 for all their streaming needs. The exact location of that video on my server for my video player component to find it is rtmp://localhost:1935/foobar/_definst_/video. I know it looks funny because I don’t have a .flv extention on it. That seriously about drove me up the wall after I figured that out. For some reason the streaming servers don’t want the extention. So I said “Whatever” and moved on. My Component is setup to accept a streaming directory and the filename as separate parameters. The directory I put in the component parameter is…

1

rtmp://localhost:1935/foobar/_definst_/

The video file I assigned it was video.flv and inside the component code I just did a search/replace for .flv and replaced it with an empty string. This will aleviate any confusion if anyone else ever has to use it.

Modifying the Video Player
Their are only a few things you need to do to get it to work with your custom video player. First off, like I mentioned in the previous paragraph, you need to add an inspectable to allow the flash dev to put in the directory of the streaming file. The reason this is necessary is because you need to connect to that directory before you can load the file. Normally with a progressively downloaded video file you setup your NetConnection to connect to ‘null’ meaning it doesn’t require you to have a persistant connection to any server location. To connect to the streaming directory you simply pass the streaming directory into the NetConnection’s ‘connect’ function. Since my component allows for both streaming and progressive video, I put a conditional in to make that work. Here is the code I used…

1
2
3
4
5
6
7

var my_video:Video; // my_video is a Video object on the Stage
__videoConnection = new NetConnection();
if(__streamDir != undefined) __videoConnection.connect(__streamDir); // Streaming Server
else __videoConnection.connect(null); // Progressive
__videoStream = new NetStream(__videoConnection);
__videoStream.setBufferTime(__bufferTime);
__videoObj.attachVideo(__videoStream);

Doing that will connect you to the video directory and then just play the video file as normal making sure you take off the .flv extension from the video filename.

Displaying Buffering Percent
I also thought it would be nice to let the user know when the video was buffering/streaming so they weren’t wondering what was going on. You can find out when the buffering starts and when the buffering ends by viewing the NetStream’s onStatus event. Buffereing will begin when ‘NetStream.Play.Start’ is returned. Buffering is complete and the video will begin playing when ‘NetStream.Buffer.Full’ is returned. When the buffering starts I tell the code to display the streaming message, when it completes I tell it to remove the streaming message. Here is the code I used…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var owner = this;
__videoStream.onStatus = function(infoObject) {
   if (infoObject.code == "NetStream.Play.Start") {
      if(owner.__streamDir != undefined && !owner.__isStreaming) {
         owner.onStreaming();
         owner.__bufferInterval = setInterval(owner, "checkBufferTime", 100, owner.__videoStream);
      }
   }
   if (infoObject.code == "NetStream.Buffer.Full") {
      if(owner.__streamDir != undefined) {
         owner.onStreamingComplete();
         clearInterval(owner.__bufferInterval);
      }
   }
}

Since I am doing this within a class, I used an ‘owner’ variable to maintain the proper scope for my function calls. You will also notice I added an interval for when the buffering was taking place. That was necessary for me to constantly report the buffering percent when displaying the buffering message. That code goes like this…

1
2
3
4

private function checkBufferTime(my_ns:NetStream):Void {
   var bufferPct:Number = Math.min(Math.round(my_ns.bufferLength/my_ns.bufferTime*100), 100);
   onBuffering(bufferPct);
}

It simply performs a callback function of the calculated buffering percent.

Well, that is about all the information you need in order to get your video player component to start streaming video. I will post an example of my streaming video using Wowza very soon, I promise.