Streaming media files

Playing streams nested in subfolders

To play a stream, specify the codec before you specify the path to the stream. FLV streams don’t require a codec prefix, but F4V/MP4 files, MP3 files, and RAW files do.

Suppose you’re using the default vod application. By default, the vod application is configured to look for streams in the applications/vod/media folder. Suppose a stream called “sample” is nested in the applications/vod/media/final folder. The following examples are for the client-side NetStream.play() method:

ns.play("mp4:final/sample.f4v",0,-1)  // F4V/MP4 files 
ns.play("raw:final/sample",0,-1) // RAW files 
ns.play("mp3:final/sample",0,-1) //MP3 files 
ns.play("final/sample",0,-1). // FLV files

The following are examples for the Server-Side ActionScript Stream.play() method:

myStream.play("mp4:final/sample.f4v",0,-1)  // F4V/MP4 files 
myStream.play("raw:final/sample",0,-1)  // RAW files 
myStream.play("mp3:final/sample",0,-1)  // MP3 files 
myStream.play("final/sample",0,-1)  // FLV files

Run the example in Flash

1. Create a rootinstall/applications/mediaplayer folder.

2. Copy the rootinstall/documentation/samples/MediaPlayer/streams folder to the rootinstall/applications/mediaplayer folder so you have the following:

   rootinstall/applications/mediaplayer/streams/_definst_/bikes.flv

3. In Flash, open the MediaPlayer.fla file from the rootinstall/documentation/samples/MediaPlayer folder.

4. Select Control > Test Movie. The video plays without sound and the Output window displays messages.

   View full size graphic

   The Output window and the video in test-movie mode

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 example in Flash Builder

1. Open MediaPlayer.as in Flash Builder.

2. Choose Run > Debug. For Project, choose MediaPlayer. For Application file, choose MediaPlayer.as.

3. Click Debug.

   The video runs in an application window. Click the Flash Builder window to see the output messages.

Write the main client class

1. 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; 
   ... 
   }

2. Create a new class, MediaPlayer, and declare the variables you’ll need within it:

   public class MediaPlayer extends Sprite 
   { 
       var nc:NetConnection; 
       var ns:NetStream; 
       var video:Video; 
   ... 
   }

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

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

4. Create a netStatusHandler function that handles both NetConnection and NetStream events:

    private function netStatusHandler(event:NetStatusEvent):void{ 
       trace("event.info.level: " + event.info.level + "\n", "event.info.code: " + event.info.code); 
       switch (event.info.code){ 
           case "NetConnection.Connect.Success": 
               // Call doPlaylist() or doVideo() here. 
               doPlaylist(nc); 
                break; 
           case "NetConnection.Connect.Failed": 
               // Handle this case here. 
               break; 
           case "NetConnection.Connect.Rejected": 
               // Handle this case here. 
               break; 
            case "NetStream.Play.Stop": 
               // Handle this case here. 
               break; 
            case "NetStream.Play.StreamNotFound": 
               // Handle this case here. 
               break; 
            case "NetStream.Publish.BadName": 
                trace("The stream name is already used"); 
               // Handle this case here. 
                break; 
        } 
   }

1. Create a NetStream object and register a netStatus event listener:

   private function connectStream(nc:NetConnection):void { 
       ns = new NetStream(nc); 
       ns.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler); 
       ns.client = new CustomClient(); 
       ...

   Notice that you set the client property to an instance of the CustomClient class. CustomClient is a separate class that defines some special event handlers.

2. Create a Video object and attach the stream to it:

       video = new Video(); 
       video.attachNetStream(ns);

   In ActionScript 3.0, call Video.attachNetStream()—not Video.attachVideo() as in ActionScript 2.0—to attach the stream to the Video object.

3. Call NetStream.play() to play the stream and addChild() to add it to the Stage:

       ... 
       ns.play("bikes", 0); 
       addChild(video); 
   }

   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.

1. In your main client class, attach the new class to the NetStream.client property:

   ns.client = new CustomClient();

2. Create the new client class:

   class CustomClient { 
   }

3. 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); 
   }

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

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