Streaming from the vod folder

First, I'll show you how to stream H.264 video from the vod folder using ActionScript:

1. Download the files used in this article. The MP4 file is one created by the Film and Television Production students at the college where I work.
2. When you unzip the file, copy the Vultures.mp4 file to the Clipboard.
3. Navigate to C:\Program Files\Adobe\Flash Media Server 3.5\applications. Inside this folder you will see a folder named vod. Open it.
4. Open the media folder and paste the video on the clipboard into this folder.
5. Close the open window.

Nothing new here. If you have been following this series, you know the vod folder is seen as a publishing point. To date, all we have done is to simply set the Content Path of the FLVPlayback component to rtmp://localhost/vod/mp4:Vultures and the video plays.

In this tutorial we are going to skip using the FLVPlayback component and, instead, feed the video from the vod folder into a video object on the Stage. Here's how:

1. Open the H264_StreamVOD.fla file in the sample download. For those of you who have migrated to Flash CS4 Professional, the FLA files can be found in the FlashCS4 folder.
2. When the file opens, you will see I have created the interface for you.

3. The video object with the instance name of "myVideo" is found in the video layer. All you need to do now is to "wire this project up" with ActionScript 3.0. Select the first frame in the actions layer and press the F9 key to open the Actions panel.

   Note: The video object you use should match the dimensions and/or aspect ratio of the FLV or MP4 file it plays. The default size for a video object on the stage is 160 × 120. This is a 4:3 aspect ratio and works with FLV files that use this ratio. If you are using HD content that uses the common 16:9 aspect ratio, failing to resize the video object will result in a distorted video when it appears in the video object.

4. Click once in the Script pane and enter the following:

   var nc:NetConnection = new NetConnection();
   nc.connect("rtmp://localhost/vod");
    
   var ns:NetStream = new NetStream(nc);

The first line sets up the NetConnection and the second line tells Flash the NetConnection is to the vod folder in FMS 3.5. If you have been using a video object to progressively download a file, you will notice the connection string is the path to the vod folder on the FMS 3.5 server and not a "null" string. In this example, you are working locally with the developer version of FMS 3.5. If you have a commercial account, localhost will be replaced with an actual RTMP address (which is a series of numbers) and there might, or might not, be a path to the vod folder, depending upon your ISP's unique requirements.

With the connection made and the NetStream established, it's time to do a little bit of housekeeping and make sure you have successfully connected to the server—also to increase the amount of the video that will be buffered before it streams. Here's how:

1. Press the Return/Enter key twice and enter the following code:

   nc.onStatus = function(ncObj:Object) {
     trace(ncObj.code);
     if (ncObj.code == "NetConnection.Connect.Success") {
       ns.setBufferTime(2);

   The code starts by using an onStatus event to check if you have successfully connected to FMS 3.5. You do this by by capturing the code string ("NetConnection.Connect.Success") sent to Adobe Flash Player when the SWF connects to FMS 3.5. The trace statement will open the Output panel and actually display that code (see Figure 1) if there has been a successful connection.

   

   Figure 1. Connection code in the Output panel

   If the connection is successful, the setBufferTime() method of the NetStream class is used to put two seconds of video into the buffer. The default buffer value is 0.1 seconds; it's up to you how big a buffer to set.

2. Press the Return/Enter key and enter the remaining code:

    myVideo.attachVideo(ns);
         ns.play("mp4:Vultures");
       }
   };

   The first line attaches the NetStream to the video object with the instance of myVideo on the Stage. The second uses the NetStream play() method to actually play the video. It is important to note that you need to include the media type, mp4: (including the colon), in the string. Also, because you are using FMS 3.5, you don't need to add the extension to the video's name.

   Note: If you were using an FLV file instead, the play string would be "Vultures". You don't need to add the media type for FLV files.

3. Save and test the movie. There will be a slight delay as two seconds of the video is added to the buffer. When it finishes buffering, you get to visit a nest of baby turkey vultures, as shown in Figure 2.

   

   Figure 2. Cute little critters, aren't they?

Page 2 of 3

Previous Page

Next Page