Recipe 18.3. Playing Flash Video

Problem

You want to play streaming or progressive-download Flash Video content.

Solution

Code your own playback interface or use the FLVPlayback component.

Discussion

You can display Flash Video in your Flash projects by building your own interface and writing ActionScript to load the video. The general process to building a simple Flash Video player involves these steps:

1. Add a Video object to the library of your Flash document, and place an instance of that Video object on the stage.

2. In the Actions panel, create NetConnection and NetStream objects. If your Flash Video resides on a web server, specify the URL to the .flv file in the NetStream.play( ) method. If your Flash Video resides on a Flash Communication Server, Flash Media Server, or Flash Video Streaming Service (FVSS) provider account, specify the RTMP location of the application in the NetConnection.connect( ) method and the FLV (without the .flv extension) in the NetStream.play( ) method.

3. Add Button or MovieClip instances to act as play, stop, or pause buttons that control the playback of the video file.

To build a simple playback for progressive-download FLV files, follow these steps:

1. Create a new Flash document in Flash 8.

2. In the Library panel, click the Options menu in the top right corner and choose New Video. In the Video Properties dialog box, set the Type option to Video (ActionScript-controlled). Name the symbol whatever you prefer, and click OK.

3. Rename layer 1 to Video. On frame 1 of this layer, drag an instance of the Video object from the Library panel to the stage. In the Property inspector, name the instance vWin. Change the width and height of the instance to match that of the .flv file that you will play.

4. Create a new layer named Actions, and place this layer at the top of the layer stack. Select frame 1 of this layer, and open the Actions panel. Add the following code, substituting the FLV filename with the location and name of your FLV:

    var nc:NetConnection = new NetConnection(); nc.connect(null); var ns:NetStream = new NetStream(nc); ns.play("http://www.flashsupport.com/video/sample.flv"); var vWin:  Video; vWin.attachVideo(ns); 

   
   

5. Save the Flash document, and test it (Control/Command-Enter). The Flash Video content should play in the vWin instance.

6. Go back to the Flash document, and create a new layer named Buttons. Open the Window Common Libraries Buttons library, and expand the playback rounded folder. With frame 1 of the buttons layer selected, drag instances of the rounded green pause, rounded green play, and rounded green stop buttons to the stage below the btPause, btPlay, and btStop, respectively.

7. Select frame 1 of the actions layer, and open the Actions panel. Add the following actions to the script:

    var nDuration:Number; ns.onMetaData = function(oData:Object):Void {    nDuration = oData.duration; }; var btPause:Button; var btPlay:Button; var btStop:Button; btPause.onRelease = function():Void {    ns.pause(); }; btPlay.onRelease = function():Void {    if(ns.time < Math.floor(nDuration) ){       ns.pause(false);    } else {       ns.seek(0);    } }; btStop.onRelease = function():Void {    ns.seek(0);    ns.pause(true); }; 

   
   

8. Save the Flash document, and test the movie. Click each button to test its functionality.

To play streaming Flash Video content, modify the code on frame 1 of the Actions layer to connect to the Flash Communication, Flash Media Server, or Flash Video Streaming Server provider account. The following sample code connects to the Flash Communication Server account provided by Influxis (http://www.influxis.com):

 var nc:NetConnection = new NetConnection(); nc.connect("rtmp://fcs.iknowbetter.com/free/"); var ns:NetStream = new NetStream(nc); ns.play("sample"); 

To play Flash Video with the FLVPlayback component, follow these steps:

1. Create a new Flash document in Flash Professional 8.

2. Rename Layer 1 to cfp, short for component FLVPlayback.

3. Open the Components panel (Window Components), and from the

   With the instance selected, open the Property inspector and name the instance cfp.

4. You can set the parameters for the instance in the Parameters tab of the Property inspector or specify them in ActionScript. Click the Parameters tab, and click the contentPath field to open the Content Path dialog box. There, you can type the name of the FLV you want to play, as a relative URL (for example, sample.flv,/videos/sample.flv), or a fully qualified HTTP or RTMP URL. You can use http://www.flashsupport.com/video/sample.flv to test the functionality of the component.

5. You can also choose a player skin for the component in the Parameters tab. Scroll down to the skin field, and double-click the value. In the Select Skin dialog box, you can choose from 32 pre-built skins. The player skin is a separate Flash movie (.swf file) that is automatically copied to the same location as your local published Flash movie for the current document. The skin file must be uploaded to the same parent folder on your web server as the published Flash movie.

6. Save the Flash document, and test it (Control/Command-Enter). The Flash Video content automatically downloads and plays in the display area of the FLV-Playback component. Depending on the skin you selected, you can control a variety of playback options, from play, pause, stop, forward/back, and seek buttons to a scrub bar and a mute on/off button.