Video player example

If you have built a Flash video player interface for progressive download video, you may have used the FLVPlayback component to design the video player interface. This tutorial uses a different technique: adding the Video object to the Stage using ActionScript 3.0.

Note: For this tutorial, use the Streams sample, Streams.as, from the root_installation_folder_documentation/samples folder.

To use the FLVPlayback component with Flash, see:

Adobe Creative Suite 3 Video Workshop, "Creating a Video Application with Components"
The HTML tutorial, "Creating a Video Application with Components"

Run the sample in Flash

The easiest way to run the sample is to install it on the same computer as your development server.

Place the Streams.as file in a sample directory for client applications.
Register the application by creating a directory for it in your server installation:
RootInstall/applications/Streams
Copy the contents of the Streams sample folder (including Streams.fla) to the Streams application directory. You should then have a directory named streams/_definst_ that contains the video file, bikes.flv:
RootInstall/applications/Streams/streams/_definst_/bikes.flv
(Optional) To run the sample on a server installed on a different computer, open Streams.as and edit this line to add the URI to the application instance on your server:
```
nc.connect("rtmp://localhost/Streams");
```
See "Connecting to the server" for details on how to construct the URL.
In Flash CS3, open the copy of Streams.fla that is in the Flash Media Server applications directory.
Select Control > Test Movie. The video plays (with no sound) and the output window displays:

You can watch the output as the stream plays and the connection status changes. The call to NetStream.play() triggers the call to onMetaData, which displays metadata in the console window, like this:

metadata: duration=30 width=292 height=292 framerate=30

Run the sample in Flex

Open Streams.as in Flex Builder or Eclipse with the Flex Builder plug-in.
Choose Run > Debug. For Project, choose Streams. For Application file, choose Streams.as.

Click Debug.

An application window opens in which the video runs. Click the Flex Builder window to see the output messages. The full output looks like this:

connected is: true
event.info.level: status
event.info.code: NetConnection.Connect.Success
Congratulations! you're connected
connected is: true
event.info.level: status
event.info.code: NetStream.Play.Reset
connected is: true
event.info.level: status
event.info.code: NetStream.Play.Start
metadata: duration=30 width=292 height=292 framerate=30
[SWF] C:\samples\Streams\bin\Streams-debug.swf - 3,387 bytes after decompression
connected is: true
event.info.level: status
event.info.code: NetStream.Buffer.Full
connected is: true
event.info.level: status
event.info.code: NetStream.Play.Stop
The stream has finished playing
connected is: true
event.info.level: status
event.info.code: NetStream.Buffer.Flush
handling playstatus here
connected is: true
event.info.level: status
event.info.code: NetStream.Buffer.Empty

Write the main client class

Note: See the Streams sample, Streams.as, in ActionScript 3.0.

Create an ActionScript 3.0 class. Import NetConnection, NetStream, and any other classes you need:

package {
    import flash.display.Sprite;
    import flash.net.NetConnection;
    import flash.events.NetStatusEvent;
    import flash.net.NetStream;
    import flash.media.Video;
...
}

Create a new class, Streams, and declare the variables you'll need within it:

public class Streams extends Sprite
{
    var nc:NetConnection;
    var stream:NetStream;
    var playStream:NetStream;
    var video:Video;
...
}

Define the Streams class constructor: create a NetConnection object and add an event listener to it, and connect to the server:

public function Streams()
    {
        nc = new NetConnection();
        nc.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
        nc.connect("rtmp://localhost/Streams");
    }

Create your netStatusHandler function (note that it handles both NetConnection and NetStream events):

private function netStatusHandler(event:NetStatusEvent):void
    {
        trace("connected is: " + nc.connected );
        trace("event.info.level: " + event.info.level);
        trace("event.info.code: " + event.info.code);
        
        switch (event.info.code)
        {
            case "NetConnection.Connect.Success":
                 trace("Congratulations! you're connected");
                 connectStream(nc);
                // createPlayList(nc);
                 // instead you can also call createPlayList() here
                 break;
            
            case "NetConnection.Connect.Failed":
            case "NetConnection.Connect.Rejected":
                 trace ("Oops! the connection was rejected");
                 break;
             
            case "NetStream.Play.Stop":
                 trace("The stream has finished playing");
                 break;
             
            case "NetStream.Play.StreamNotFound":
                 trace("The server could not find the stream you specified"); 
                 break;
             
            case "NetStream.Publish.BadName":
                 trace("The stream name is already used");
                 break;
     }
}

(To see the full list of event codes that are available, check NetStatusEvent.info in the ActionScript 3.0 Language and Components Reference. )

Create a NetStream object and register a netStatus event listener:
```
private function connectStream(nc:NetConnection):void {
    stream = new NetStream(nc);
    stream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
    stream.client = new CustomClient();
    ...
```
Notice that you set the client property to an instance of the CustomClient class. CustomClient is a separate class you need to write that defines some special event handlers (see "Write the client event handler class").
Create a Video object and attach the stream to it:
```
    video = new Video();
    video.attachNetStream(stream);
```
Here we create the Video object using ActionScript 3.0. You can also create it by dragging the Video symbol to the Stage in Flash.

In ActionScript 3.0, use Video.attachNetStream()--not Video.attachVideo() as in ActionScript 2.0--to attach the stream to the Video object.
Call NetStream.play() to play the stream and addChild() to add it to the Stage:
```
    ...
    stream.play("bikes", 0);
    addChild(video);
}
```
You don't need to call addChild() if you dragged a Video symbol to the Stage using Flash.

The URI of the stream you pass to NetStream.play() is relative to the URI of the application you pass to NetConnection.connect().

Write the client event handler class

You also need to write the CustomClient class, which contains the onMetaData and onPlayStatus event handlers. You must handle these events when you call NetStream.play(), but you cannot use the addEventListener() method to register the event handlers.

In your main client class, attach the new class to the NetStream.client property:
```
stream.client = new CustomClient();
```
Create the new client class:
```
class CustomClient {
}
```

Write a function named onMetaData() to handle the onMetaData event:

public function onMetaData(info:Object):void {
    trace("metadata: duration=" + info.duration + " width=" + info.width + 
        " height=" + info.height + " framerate=" + info.framerate);
}

Write a function named onPlayStatus() to handle the onPlayStatus event:

public function onPlayStatus(info:Object):void {
    trace("handling playstatus here");
}

Checking video files before playing

Use the FLVCheck tool to check a recorded video file for errors before playing it. Errors in the video file might prevent it from playing correctly. For more information, see Adobe Flash Media Server Configuration and Administration Guide.

Flash Media Server Developer Documentation

Video player example