Playing back FLVs with ActionScript 3.0

OK, this isn’t a huge difference between ActionScript 2.0 and ActionScript 3.0, but it is good to know anyways…

In previous versions of ActionScript, in order to play back and FLV (without using a component) you’d need to create a Video object in the library, add it to the Stage, and give it an instance name, as seen in the following example:

// AS2
// requires: Video symbol on Stage with instance name of "myVideo".
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
myVideo.attachVideo(ns);
ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");

In ActionScript 3.0, you can now create a new Video object using the Video() constructor, and adding it to the display list using the addChild() method, as seen in the following example:

// AS3
var myVideo:Video = new Video();
addChild(myVideo);
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
myVideo.attachNetStream(ns);
ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");

Where it starts to get a bit more interesting, is when you want to work with video cue points and meta data. ActionScript 2.0 used the onCuePoint and onMetaData event handlers to process cue points and meta data, as shown in the following example:

// AS2
// requires: Video symbol on Stage with instance name of "myVideo".
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
ns.onCuePoint = function(infoObject:Object):Void {
trace("cuePoint");
}
ns.onMetaData = function (infoObject:Object):Void {
trace("metaData");
}
myVideo.attachVideo(ns);
ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");

In ActionScript 3.0, you have a few more options for handling the information. One of the simplest methods is to create a simple Object which processes the onCuePoint and onMetaData event handlers in ActionScript 3.0. You can see an example of this in the following code:

// AS3
var customClient:Object = new Object();
customClient.onCuePoint = cuePointHandler;
customClient.onMetaData = metaDataHandler;

var myVideo:Video = new Video();
addChild(myVideo);

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
ns.client = customClient;
myVideo.attachNetStream(ns);
ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");

function cuePointHandler(infoObject:Object):void {
trace("cuePoint");
}
function metaDataHandler(infoObject:Object):void {
trace("metaData");
}

This code begins by creating a new Object instance named customClient which defines listeners for the onCuePoint and onMetaData event handlers. The cuePointHandler and metaDataHandler variables point to user-defined functions which are defined later in the code. Later, the client property on the NetStream instance is set to the customClient object.

Another way of handling the cue points and meta data is to create a new class which you can use with the client property. The code is roughly similar to the previous example:

// AS3
var myVideo:Video = new Video();
addChild(myVideo);

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
ns.client = new CustomClient();
myVideo.attachNetStream(ns);
ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");

This time, instead of defining an object to handle the onCuePoint and onMetaData event handlers, the code is moved into an external file named “CustomClient”, which contains the following code:

package {
public class CustomClient {
public function onCuePoint(infoObject:Object):void {
trace("onCuePoint");
}
public function onMetaData(infoObject:Object):void {
trace("onMetaData");
}
}
}

On the other hand, if you wanted to ignore the cue point and meta data information from an FLV altogether, you could use either one of the following snippets:

// AS3
var myVideo:Video = new Video();
addChild(myVideo);

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
ns.client = new Object();
myVideo.attachNetStream(ns);
ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");

The previous example sets the client property to a new Object instance, which doesn’t have any event handlers for the onCuePoint and onMetaData callbacks. As an alternative, you could also set up an event listener for the AsyncErrorEvent.ASYNC_ERROR event which does nothing, as seen in the following code:

// AS3
var myVideo:Video = new Video();
addChild(myVideo);

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorEventHandler);
myVideo.attachNetStream(ns);
ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");

function asyncErrorEventHandler(event:AsyncErrorEvent):void {
// ignore
}

17 Responses to Playing back FLVs with ActionScript 3.0

  1. carlos garza says:

    helpful example! how can i loop continuously the flv in this AS3 example code?Thnx, and keep posting.Best regards.

  2. Jacob says:

    Thank you for this. Can I use cuePointHandler w/ AS2? Is there a way to be notified when FLV reaches the end? Thanks

  3. Nshen says:

    how about videoDisplay ??videoDisplay cantns.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorEventHandler);so how to do it ??

  4. John says:

    I’m just about to try this out, but with a MovieClip instead of a Video object, will this work? I want to use the MovieClip object so that I can use the gotoAndPlay, currentFrame and stuff like that on the flv I am playing. Does it make sense to use a MovieClip, or would you suggest another object. I was going to use the VideoDisplay but it does not expose all the methods I need, and there is no way to get at its player instance. Any help would be great.

  5. Ryan Brownlow says:

    I am trying to have cue points load swfs. I am having trouble getting it to work. I’ve got the cue points in and they are being traced on export but I can’t seem to get them to load the swfs.can you help?Ryan

  6. karen says:

    Hello – I’m trying to learn how to take a .flv video that has two cue points embedded, one “cue1” and the other “cue2′. While the flv is playing, I want to be able to detect the end of the movie, which is cue2, and then loop continuously back to cue1. What is the easiest way to handle this? Thank you.

  7. Michael Newman says:

    Wow that is just strange. Do I need to define a client for every netstream? That seems a bit buggy to me.

  8. Peter says:

    Michael,I don’t know I’d say its “buggy”. Granted, it is somewhat different from the behavior in ActionScript 2.0, but creating a client can be as easy as two characters (use an empty object, “{}”) or you can create a custom class and then you can reuse the custom class with minimal overhead. Custom classes can actually make code reuse a lot easier.For more information on NetStream and creating clients, you can check out my Quick Start article on the Developer Center, “Handling metadata and cue points in Flash video”.

  9. Jay says:

    THis is driving me nuts. I’m almost done completing my site. I have 4 videos (four separate pages).my problem: when I click to play video 1 then click say the home button. video 1 continues to play (i hear the video). how could i set it so that it stops?my code:this.chanel_button.addEventListener(MouseEvent.CLICK,clickListener1);function clickListener1(event:MouseEvent):void {gotoAndPlay(“cha”);}this.reel_button.addEventListener(MouseEvent.CLICK,clickListener2);function clickListener2(event:MouseEvent):void {gotoAndPlay(“reel”);}this.static_button.addEventListener(MouseEvent.CLICK,clickListener3);function clickListener3(event:MouseEvent):void {gotoAndPlay(“stat”);}this.trailer_button.addEventListener(MouseEvent.CLICK,clickListener4);function clickListener4(event:MouseEvent):void {gotoAndPlay(“trailer”);}this.press_button.addEventListener(MouseEvent.CLICK,clickListener6);function clickListener6(event:MouseEvent):void {gotoAndPlay(“home”);}

  10. Jens Hauser says:

    Hi,I have a question i hope you can answer for me: how can I keep track of the different builds of a Flash file.I usually have different servers that I update the .swf on but sometimes I am not sure which version is active and which version shows in my browser. I would like to right click and have a menu showing metadata or find out some way to include metadata in the file and an easy way to view it.Kind regards from snowy Helsingborg, SwedenJens Hauser

  11. Jacob says:

    Hey Peter, Here’s the stopAllSounds(); command as we remembered it in AS2, this time for AS3:import flash.media.Sound;import flash.media.SoundLoaderContext;import flash.media.SoundChannel;import flash.media.SoundMixer;SoundMixer.stopAll();

  12. Peter says:

    Hi,I’ve been having some trouble adding a flashvars to this example to link to the flv from html instead.Regards,Peter R.

  13. Benjamin Cankalp says:

    hii am doing a streaming service with flash lite . and the thing i am wondering about is do i need to write some thing ells then null in this part of the codenc.connect(null);

  14. Nitin Arora says:

    i m attaching netstream to my video object. but sometimes it does not show anything on my video object.i can’t blame the netstream, bcoz it given the status “netstream.play”so i want something to check my video object that is there anything playing on video object or not.any suggestion are welcome at nitin.arora@appulse.comthanks in advance

  15. beto Carlock says:

    hey peter..i’ve a lot of problems with this script, i’m trying to load a external local video by using a class. But when i run the swf only the sound load the video don’t display!this is my class:package {import flash.display.DisplayObjectContainer;import flash.net.NetConnection;import flash.net.NetStream;import flash.media.Video;import flash.display.*;import flash.events.AsyncErrorEvent;public class video extends Sprite {public var videoConnection:NetConnection;public var videoStream:NetStream;public var myVideo:Video;public var elVideo:String;public function video(elVideo:String) {videoConnection=new NetConnection();videoConnection.connect(null);var customClient:Object = new Object();videoStream=new NetStream(videoConnection);videoStream.client=customClient;videoStream.addEventListener(AsyncErrorEvent.ASYNC_ERROR, asyncErrorHandler);videoStream.play(elVideo);//customClient.onMetaData = metaDataHandler;myVideo=new Video();myVideo.attachNetStream(videoStream);addChild(myVideo);}function asyncErrorHandler(event:AsyncErrorEvent):void {trace(event.text);}}}and this is my fla:var peli:video=new video(“video.flv”);:)

  16. eric says:

    que bien me sirvio mucho gracias al aportador de estos codigos as3 gracias por alimentar mi conocimiento

  17. Ali says:

    very useful tutorial.