06.03Tutorial - Playing FLV video in plain AS3 - Part 1

Hi Everyone,

today I will explain how to play .FLV files that are hosted on a standard HTTP server, no fancy streaming. You can use pre-made components to do so, but sometimes, for whatever reason, you want to do it yourself. I wrote my first FLV playing algorithm in AS3 about 10 months ago, it has evolved since and here is the breakdown on how I make it work. It's been used in many widgets, mostly for Music Nation.

Objects we will play with

There are a number of objects available in the standard AS3 library that is included with both Flash CS3 and Flex. Here is a list of those we will be using, along with a point form explanation of what we will use them for

  • flash.net.NetConnection -- to establish the connection to the HTTP server
  • flash.net.NetStream -- to "stream" or download the media from the HTTP server
  • flash.media.SoundTransform -- to modify the volume at which the FLV is playing
  • flash.media.Video -- this holds the visual representation of the video

This being said, we will also have to catch quite a few potential errors, here is the list of error events we will deal with

  • flash.events.SecurityErrorEvent -- on NetConnection
  • flash.events.IOErrorEvent -- on NetConnection AND NetStream
  • flash.events.AsyncErrorEvent -- on NetStream

And finally we will use the flash.net.NetStatusEvent on both the NetStream and the NetConnection to keep track of what is happening.

First bit of code..

I will start with the basics..

PLAIN TEXT
Actionscript:
  1. var connection:NetConnection;
  2. var stream:NetStream;
  3. var video:Video;
  4.  
  5. // first let's create the NetConnection
  6. connection = new NetConnection();
  7.  
  8. // let set it to HTTP "streaming" mode, the null is to specify we are NOT connecting to a media server
  9. connection.connect(null);
  10.  
  11. // now let's create the NetStream
  12. stream = new NetStream(connection);
  13.  
  14. // the set it's client to receive certain events
  15. stream.client = this;
  16.  
  17. // create a video object, set it to 425x320 as default size, this holds the visual representation of the video
  18. var video:Video = new Video(425, 320);
  19.  
  20. // add it to the stage
  21. stage.addChild(video);
  22.  
  23. // attach the NetStream to the video object
  24. video.attachNetStream(stream);
  25.  
  26. // let's set the default buffer time to 1 second
  27. stream.bufferTime = 1;
  28.  
  29. // tell the stream to receive the audio
  30. stream.receiveAudio(true);
  31.  
  32. // tell the stream to receive the video
  33. stream.receiveVideo(true);
  34.  
  35. // play a FLV file on a HTTP server
  36. stream.play("http://www.yourhost.com/myvideo.flv");

That's it. With this code, you'll be playing a FLV file on the Stage. No controls yet...

The MetaData

This line of code

PLAIN TEXT
Actionscript:
  1. stream.client = this;


enables the object ("this" in this case) to receive special information about the playing Stream. You need to implement functions to catch that information, namely: onMetaData, onCuePoints, onPlayStatus. In the case of playing .FLV's off an HTTP server, the onCuePoints and onPlayStatus are completely useless.

There are a number of things that are important about an FLV file that is playing, which are both received when the FLV starts loading:

  • video size in pixels
  • actual duration of the FLV in seconds

Here is how you catch it:

PLAIN TEXT
Actionscript:
  1. public function onMetaData(infoObject:Object):void
  2. {
  3.      if(infoObject.duration != null)
  4.      {
  5.           trace("our video is "+infoObject.duration+" seconds long");
  6.      }
  7.  
  8.      if(infoObject.height != null && infoObject.width != null)
  9.      {
  10.           trace("our video is "+infoObject.height+"x"+infoObject.width+" pixels");
  11.  
  12.           // here you want to resize your video object to match there dimensions
  13.           video.height = infoObject.height;
  14.           video.width = infoObject.width;
  15.           // for example
  16.      }
  17. }

Handling Events & Errors

Both the NetStream and NetConnection objects throw errors.

PLAIN TEXT
Actionscript:
  1. // on the NetConnection
  2. connection.addEventListener(NetStatusEvent.NET_STATUS, doNetStatus);
  3. connection.addEventListener(IOErrorEvent.IO_ERROR, doIOError);
  4. connection.addEventListener(SecurityErrorEvent.SECURITY_ERROR, doSecurityError);
  5.  
  6. // on the NetStream
  7. stream.addEventListener(AsyncErrorEvent.ASYNC_ERROR, doAsyncError);
  8. stream.addEventListener(NetStatusEvent.NET_STATUS, doNetStatus);
  9. stream.addEventListener(IOErrorEvent.IO_ERROR, doIOError);
  10.  
  11. protected function doSecurityError(evt:SecurityErrorEvent):void
  12. {
  13.     trace("AbstractStream.securityError:"+evt.text);
  14.         // when this happens, you don't have security rights on the server containing the FLV file
  15.         // a crossdomain.xml file would fix the problem easily
  16. }
  17.        
  18. protected function doIOError(evt:IOErrorEvent):void
  19. {
  20.     trace("AbstractScreem.ioError:"+evt.text);
  21.         // there was a connection drop, a loss of internet connection, or something else wrong. 404 error too.
  22. }
  23.  
  24. protected function doAsyncError(evt:AsyncErrorEvent)
  25. {
  26.     trace("AsyncError:"+evt.text);
  27.         // this is more related to streaming server from my experience, but you never know
  28. }
  29.  
  30. protected function doNetStatus(evt:NetStatusEvent):void
  31. {
  32.     trace(evt.info.code);
  33.         // this will eventually let us know what is going on.. is the stream loading, empty, full, stopped?
  34. }

ok that's it for today, I will write part 2 tomorrow or the next day. In part two I will cover the trickier stuff, tracking the loading progress, enabling play/pause/stop, canceling the loading process of a FLV, seeking to a certain position, tracking the position of the stream and finally knowing exactly when the FLV is done playing!

Cheers!



Related posts (automatically generated):

  1. Tutorial - Playing FLV video in plain AS3 - Part 2
  2. Tutorial - Playing FLV video in plain AS3 - Part 3 (Updated)
  3. Tutorial - Playing FLV video in plain AS3 - Part 4 - Sample Usage


Filed under: actionscript, as3, as3 tutorials, flash, work, , , ,

7 Responses to “Tutorial - Playing FLV video in plain AS3 - Part 1”

  1. Giannis T. says:

    Thank you for a really enlightening articles series!

    October 1st, 2008 at 2:45 pm

  2. Jack says:

    Hey,

    Thank you so much for putting these tutorials online. You are an invaluable help to peoples understanding of ActionScript.

    I followed the tutorial and everything was working fine until I set up the Security/Error/NetStatus functions. It then stated that an instance was null and would not compile the file. I built a class for this and attached it to the Fla through the Document class. I imagine that in the next 2 tutorials it will clear up.

    Thanks for all your incredible help. I in turn, will set up the same kind of blog when I get to your level to help people out like you helped me.

    Why would it do that?

    August 11th, 2009 at 4:12 pm

  3. Raman says:

    This tutorial is excellent .

    I want to create flv player with all the functionalities but
    want that playing video to be manged by user.
    i.e suppose if our video is 2 min long and user wants to view a part of video from timings 1min to 1min 30 sec ..
    how can we do that

    October 29th, 2009 at 2:13 am

  4. Mark says:

    Nice tutorial, but where do you call the onMetaData function? I don’t get the trace of the function in my output? I’ve tried to use a client object, but that didn’t work.

    //

    _client = new Object();

    _stream = new NetStream(_connection);
    _stream.client = _client;

    _client.onMetaData = onMetaData;

    //

    Thank you for responding!
    Mark

    January 12th, 2010 at 3:07 am

  5. dbam says:

    I’m really thankful for this collection on FLV playback error-handling.
    Extremely HAND(L)Y!

    Have a good day.

    January 14th, 2010 at 2:44 pm

  6. Rowan Gray says:

    I’ve just nabbed your code because my own FLV player is aweful, I did intend to recode it, but your player here is so beautifully coded I’m just going to use that and
    add on bits if I need extra functions.

    Thank you.

    January 17th, 2010 at 9:07 pm

  7. Rowan Gray says:

    should add:

    public function onXMPData(infoObject:Object):void { }

    to FLVPlayer, to silence the onXMPData error ;)

    January 17th, 2010 at 11:14 pm

Leave a Reply

« Tutorial - Playing FLV video in plain AS3 - Part 2 Tutorial - Consuming REST web services in ActionScript 3 - Part 3 »