12.11Tutorial - Playing FLV video in plain AS3 - Part 4 - Sample Usage

Hi Everyone..

This is the fourth (and most probably the last) installment of this series on playing FLV (and H.264 MP4) video in Flash from scratch.

Full source code for the library is here.

The related posts are:

For many of you, this might be the only post you are interested in. It will show you how to use the library.

Let's start with the basics, or if you prefer, the essentials ;). Download the source which is here. Unzip it into your classpath, then create a new ActionScript class (I suggest FlashDevelop or for those who can deal with Eclipse (i can't) Flex Builder). Comments are in the code.

PLAIN TEXT
Actionscript:
  1. package 
  2. {
  3.     import flash.display.Sprite;
  4.     import flash.media.Video;
  5.     import newcommerce.media.FLVPlayer;
  6.     import newcommerce.media.MediaData;
  7.    
  8.     /**
  9.      * ...
  10.      * @author Martin Legris
  11.      */
  12.     public class FLVPlayerTest extends Sprite
  13.     {
  14.         // Video instance to display the video
  15.         protected var _video:Video;
  16.  
  17.         // player Instance to control the playback
  18.         protected var _player:FLVPlayer;
  19.        
  20.         public function FLVPlayerTest()
  21.         {
  22.             init();
  23.             createChilds();
  24.             initEvents();
  25.             startVid();
  26.         }
  27.        
  28.         protected function init():void
  29.         {
  30.             // create the player
  31.             _player = new FLVPlayer();
  32.         }
  33.        
  34.         protected function createChilds():void
  35.         {
  36.             // create the video
  37.             _video = new Video(320, 200);
  38.  
  39.             // add to displayList
  40.             addChild(_video);
  41.            
  42.             // connect the player with the video
  43.             _player.video = _video;
  44.         }
  45.        
  46.         protected function initEvents():void
  47.         {
  48.  
  49.         }
  50.  
  51.         protected function startVid():void
  52.         {
  53.             // create a mediaData instance, with the URL of the media we want to play
  54.             var media:MediaData = new MediaData("http://www.newcommerce.ca/as3/movie.mp4");
  55.  
  56.             // play the media..
  57.             _player.playMedia(media);
  58.         }
  59.     }
  60. }

List of Events
Now this is good, the video is playing, let's look into the events generated by the FLVPlayer class. Their name is meant to be descriptive enough, and here is the full list:

  • MediaSizeEvent.SIZE -- dispatched when the dimensions in pixels of the video is received
  • MediaEvent.STARTED_PLAYING -- dispatched when the video starts playing
  • MediaEvent.FINISHED_PLAYING -- dispatched when the video finished playing
  • MediaTimeEvent.DURATION -- dispatched when the duration (seconds) of the video is received
  • MediaTimeEvent.TIME -- dispatched a few times a second to update the current position of the video
  • MediaEvent.ERROR -- dispatched when an error is found while playing

Handling each event
First we need to update the initEvents function to add event listeners for each event...

PLAIN TEXT
Actionscript:
  1. protected function initEvents():void
  2. {
  3.     _player.addEventListener(MediaSizeEvent.SIZE, doMediaSize); 
  4.     _player.addEventListener(MediaEvent.STARTED_PLAYING, doMediaStarted);   
  5.     _player.addEventListener(MediaEvent.FINISHED_PLAYING, doMediaFinished);
  6.     _player.addEventListener(MediaEvent.ERROR, doMediaError);
  7.     _player.addEventListener(MediaTimeEvent.DURATION, doMediaDuration);
  8.     _player.addEventListener(MediaTimeEvent.TIME, doMediaTime);
  9. }

MediaSizeEvent.SIZE
This event carries with it the dimensions in pixels of the FLV or MP4 file. It can be used to resize the Video object accordingly, either stretching to specific dimensions while maintaining aspect ratio, or fitting it exactly.

PLAIN TEXT
Actionscript:
  1. protected function doMediaSize(evt:MediaSizeEvent):void
  2. {
  3.     // here we fit the Video object to the exact dimensions of the FLV video
  4.     _video.width = evt.width;
  5.     _video.height = evt.height;
  6. }

MediaEvent.STARTED_PLAYING & MediaEvent.FINISHED_PLAYING
These two events simply indicate when the media starts and finishes playing. I don't know what you want to do then, so I simply trace it to the output.

PLAIN TEXT
Actionscript:
  1. protected function doMediaStarted(evt:MediaEvent):void
  2. {
  3.     trace("media started playing");
  4. }
  5.        
  6. protected function doMediaFinished(evt:MediaEvent):void
  7. {
  8.     trace("media finished playing");
  9. }

MediaEvent.ERROR
Honestly, I don't think I use this event yet, but maybe in the future. So again just trace it..

PLAIN TEXT
Actionscript:
  1. protected function doMediaError(evt:MediaEvent):void
  2. {
  3.     trace("media error while playing");
  4. }

MediaTimeEvent.DURATION
This event contains the length in seconds of the media playing, in this case the FLV or MP4. This can be used to adjust your scrobbler bar.. for example, or to display in a textfield somewhere.

PLAIN TEXT
Actionscript:
  1. protected function doMediaDuration(evt:MediaTimeEvent):void
  2. {
  3.     trace("media is " + evt.time + " seconds long");
  4. }

MediaTimeEvent.TIME
This event keeps you posted as to the progress of the position inside of the media. This can also be used to update your Scrobbler bar, or textfield.. It is dispatched 4 times per second, no matter how slowly or fast the media is playing.

PLAIN TEXT
Actionscript:
  1. protected function doMediaTime(evt:MediaTimeEvent):void
  2. {
  3.     trace("media is at " + evt.time + " seconds");
  4. }

Other useful functions
You can also explore certain functions, which are rather straightforward; such as:

  • pause
  • play
  • mute
  • setVolume
  • mute
  • seek
  • stop
  • close
  • reset

Cheers!

Martin



Related posts (automatically generated):

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


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

Leave a Reply

« Tutorial - Consuming REST web services in ActionScript 3 - Part 4 Tutorial - Playing Video with SubTitles in AS3 - Part 1 »