06.10Tutorial - Playing FLV video in plain AS3 - Part 2

Hi Everyone,

today I will continue on this topic:

and the following installments are here:

In the first part I only discussed the essentials for playing an FLV. Today I will show how to build a re-usable class around those basic ideas. At the end of this tutorial you will have a solid set of classes (3) that you can reuse as a base to play FLV videos in all your widgets.

Architecture

There will be three classes involved in the development today:

  • MediaData -- to hold the information on the FLV being played
  • FLVPlayer -- to play the FLV
  • MediaEvent -- to communicate with the outside world as to what is going on inside the FLVPlayer

This is a gross preview of where we are heading at:
diagram of FLVPlayer

MediaData
Will hold the basic information about the FLV to be played: it's height, width, duration, uri, image to represent it, and title

FLVPlayer
Will play the actual FLV, using the MediaData object as input, and dispatch MediaEvent's to inform the outside world of what is going on.

MediaEvent
Hold information to be received by the outside world, updating the status on what is happening in the FLVPlayer

MediaData

This is a simple class, whose role is simply to hold the information on a particular FLV file. It contains:

  • title -- the title of the flv
  • image -- an image to be used to represent the flv, either as a thumbnail or a place holder before the flv loads
  • uri -- the uri of the FLV file itself
  • duration -- the duration in seconds of the flv file
  • width -- the width in pixels of the video
  • height -- the height in pixels of the video
PLAIN TEXT
Actionscript:
  1. package newcommerce.media
  2. {
  3.     public class MediaData
  4.     {
  5.         protected var _uri:String;
  6.         protected var _title:String;
  7.         protected var _duration:Number;
  8.         protected var _image:String;
  9.         protected var _width:Number;
  10.         protected var _height:Number;
  11.        
  12.         public function set uri(uri:String):void { _uri = uri; }
  13.         public function get uri():String { return _uri; }
  14.         public function set image(image:String):void { _image = image; }
  15.         public function get image():String { return _image; }
  16.         public function set title(title:String):void { _title = title; }
  17.         public function get title():String { return _title; }
  18.         public function set duration(duration:Number):void { _duration = duration; }
  19.         public function get duration():Number { return _duration; }
  20.         public function get width():Number { return _width; }
  21.         public function set width(value:Number):void { _width = value; }
  22.         public function get height():Number { return _height; }
  23.         public function set height(value:Number):void { _height = value; }
  24.        
  25.         function MediaData(uri:String = "", title:String = "", duration:Number = 0,  image:String = "", width:Number = 320, height:Number = 200)
  26.         {         
  27.             _uri = uri;
  28.             _title = title;
  29.             _duration = duration;
  30.             _image = image;
  31.             _width = width;
  32.             _height = height;
  33.         }
  34.     }
  35. }

FLVPlayer

The FLVPlayer is the core where all the action happens. First let's start with the most important functions:

  • connect() -- to initialize the NetConnect & NetStream objects
  • playMedia(media:MediaData) -- to start playing the media
  • pause() -- to pause the media
  • seek(pos:Number) -- to seek to a certain position

For an explanation of the code down here, please refer to the first part of the tutorial, which covers the basics. Note that if you want efficient loading of FLV's one after the other, where it's possible that the first one is not completely loaded yet when you want the second one to start playing (each new video replacing the old ones) it's important to close the NetStream then the NetConnection, and start over with fresh ones (from my experience).

PLAIN TEXT
Actionscript:
  1. package newcommerce.media
  2. {
  3.         import flash.media.SoundTransform;
  4.    
  5.     import newcommerce.media.MediaData;
  6.     import newcommerce.media.MediaEvent;
  7.    
  8.     import flash.net.NetConnection; 
  9.     import flash.net.NetStream;
  10.     import flash.media.Video;
  11.     import flash.display.Sprite;
  12.  
  13.     import flash.events.IOErrorEvent;
  14.     import flash.events.NetStatusEvent; 
  15.     import flash.events.SecurityErrorEvent;
  16.     import flash.events.AsyncErrorEvent;
  17.    
  18.     import flash.events.EventDispatcher;
  19.     import flash.utils.Timer;
  20.     import flash.events.TimerEvent;
  21.  
  22.     public class FLVPlayer extends EventDispatcher
  23.     {      
  24.         protected var _currentMedia:MediaData;     
  25.         protected var _stream:NetStream;
  26.         protected var _paused:Boolean = false;
  27.         protected var _playing:Boolean = false;
  28.         protected var _timer:Timer;  
  29.         protected var _soundTransform:SoundTransform;
  30.         protected var _lastVolume:Number = 1;
  31.         protected var _mute:Boolean = false;       
  32.         protected var _connection:NetConnection;       
  33.         protected var _mediaFinished:Boolean = false;      
  34.         protected var _streamStatus:Array;
  35.         protected var _lastPos:Number;
  36.         protected var _video:Video;
  37.  
  38.  
  39.         // constructor will go here
  40.  
  41.         public function connect():void
  42.         {
  43.             // stop the stream if it exists and is playing
  44.             stop();
  45.  
  46.             // build a new NetConnection and NetStream
  47.             newStream();
  48.         }
  49.  
  50.         protected function newStream():void
  51.         {
  52.             // if either the _stream or _connection are open, remove event listeners and close them
  53.             if(_stream != null)
  54.             {
  55.                 _stream.removeEventListener(AsyncErrorEvent.ASYNC_ERROR, doAsyncError);
  56.                 _stream.removeEventListener(NetStatusEvent.NET_STATUS, doNetStatus);
  57.                 _stream.removeEventListener(IOErrorEvent.IO_ERROR, doIOError);
  58.                 _stream.close();
  59.             }
  60.        
  61.             if(_connection != null)
  62.             {
  63.                 _connection.removeEventListener(NetStatusEvent.NET_STATUS, doNetStatus);
  64.                 _connection.removeEventListener(IOErrorEvent.IO_ERROR, doIOError);
  65.                 _connection.removeEventListener(SecurityErrorEvent.SECURITY_ERROR, doSecurityError);
  66.                 _connection.close();
  67.             }
  68.  
  69.             // create a new connection
  70.             _connection = new NetConnection();
  71.             _connection.connect(null);
  72.             _connection.addEventListener(NetStatusEvent.NET_STATUS, doNetStatus);
  73.             _connection.addEventListener(IOErrorEvent.IO_ERROR, doIOError);
  74.             _connection.addEventListener(SecurityErrorEvent.SECURITY_ERROR, doSecurityError);
  75.            
  76.             // create a new stream
  77.             _stream = new NetStream(_connection);
  78.             _stream.addEventListener(AsyncErrorEvent.ASYNC_ERROR, doAsyncError);
  79.             _stream.addEventListener(NetStatusEvent.NET_STATUS, doNetStatus);
  80.             _stream.addEventListener(IOErrorEvent.IO_ERROR, doIOError);
  81.             _stream.client = this;
  82.  
  83.             // attach the stream to the Video visual component
  84.             _video.attachNetStream(_stream);
  85.  
  86.             // set the bufferTime (in seconds)
  87.             _stream.bufferTime = 1;
  88.  
  89.             // receive audio and video
  90.             _stream.receiveAudio(true);
  91.             _stream.receiveVideo(true);
  92.         }
  93.  
  94.         public function playMedia(media:AbstractMediaData):void
  95.         {
  96.             // used to track when a media has finished playing or not
  97.             _mediaFinished = false;
  98.             if(media == null)
  99.                 return;
  100.            
  101.             _currentMedia = media;
  102.  
  103.             // used to track the status message we received in the doNetStatus function
  104.             _streamStatus = [];
  105.            
  106.             // force a fresh play
  107.             play(true);
  108.         }   
  109.  
  110.         // function to play the _currentMedia, forced means to force it to restart at the beginning, while unforced can serve to "de-pause" a playing FLV
  111.         public function play(forced:Boolean = false):void
  112.         {
  113.             // if the FLV is paused and we are not forcing it to start at the beginning
  114.             if(_paused && !forced)
  115.             {
  116.                 _stream.resume();
  117.                 _paused = false;
  118.                 _timer.start();
  119.                 return;
  120.             }
  121.  
  122.             // reset the NetConnection and NetStream objects (this is important when having a player with a playlist with a SKIP or NEXT button..
  123.             connect();
  124.  
  125.             // officially starts streaming the .FLV file
  126.             _stream.play(_currentMedia.uri);
  127.  
  128.             // set the volume to the _lastVolume value
  129.             setVolume(this._lastVolume*100);
  130.  
  131.             // set the playing flag
  132.             _playing = true;
  133.  
  134.             // set the pause flag
  135.             _paused = false;
  136.  
  137.             // start our timer to track stream position & loading progress
  138.             _timer.start();
  139.         }
  140.  
  141.         public function stop():void
  142.         {
  143.             // if playing flag is on
  144.             if(!_playing)
  145.                 return;
  146.  
  147.             // pause the stream    
  148.             _stream.pause();
  149.  
  150.             // set playing flag to false
  151.             _playing = false;
  152.  
  153.             // stop the timer
  154.             _timer.stop();
  155.         }
  156.  
  157.         public function pause():void
  158.         {
  159.             // pause the stream
  160.             _stream.pause();
  161.  
  162.             // set the paused flag to true
  163.             _paused = true;
  164.  
  165.             // stop the timer
  166.             _timer.stop();
  167.  
  168.             // notice the _playing flag is untouched. when paused, we have _playing = true & _paused = true, this could be simplified, I know.
  169.         }
  170.  
  171.         public function seek(seconds:Number):void
  172.         {   
  173.             // if the requested position is less than the media's known duration (-2 is because FLV's don't like to be seeked near the end), and we are currently _playing
  174.             if (seconds <_currentMedia.duration-2 && _playing)
  175.             {
  176.                 // record the last know valid playing position in case an error happens
  177.                 _lastPos = _stream.time;
  178.  
  179.                 // seek to the requested position
  180.                 _stream.seek(seconds);
  181.  
  182.                 // make sure the stream is playing
  183.                 _stream.resume();
  184.  
  185.                 // unset the pause flag
  186.                 _paused = false;
  187.             }
  188.         }

Now we can tackle the rest...

PLAIN TEXT
Actionscript:
  1. public function FLVPlayer()
  2.         {         
  3.             // create a new SoundTransform object, for the volume of the playing FLV
  4.             _soundTransform = new SoundTransform();
  5.  
  6.             // this timer object is used to keep track of the stream position & loading progress
  7.             _timer = new Timer(250);
  8.             _timer.addEventListener(TimerEvent.TIMER, doMediaTime);
  9.  
  10.             // initialize the streamStatus array to keep a small (3 items) log of the last doNetStatus events
  11.             // I analyze this information to understand exactly when a FLV has reached the end since time values cannot be trusted.
  12.             _streamStatus = [];
  13.         }
  14.  
  15.  
  16.         public function mute(muted:Boolean = true):void
  17.         {
  18.             _mute = muted;
  19.             if(_mute)
  20.             {
  21.                 _soundTransform.volume = 0;
  22.                 _stream.soundTransform = _soundTransform;
  23.             }
  24.             else
  25.             {
  26.                 _soundTransform.volume = _lastVolume;
  27.                 _stream.soundTransform = _soundTransform;
  28.             }
  29.         }
  30.        
  31.         public function setVolume(volume:Number):void
  32.         {   
  33.             // keep track of the last set volume for the mute function
  34.             _lastVolume = _soundTransform.volume = volume/100;
  35.            
  36.             // if not muted, apply the requested volume
  37.             if(!_mute)
  38.                 _stream.soundTransform = _soundTransform;                  
  39.         }

and finally the event handling function

PLAIN TEXT
Actionscript:
  1. public function onMetaData(infoObject:Object):void
  2.             {
  3.             // if the event contains duration information
  4.             if (infoObject.duration != null)
  5.             {
  6.                 // dispatch a DURATION event
  7.                 dispatchEvent(new MediaEvent(MediaEvent.DURATION_RECEIVED, {duration:infoObject.duration}));
  8.  
  9.                 // set the mediaData's duration
  10.                 _currentMedia.duration = infoObject.duration;
  11.             }
  12.  
  13.             // normally we received the width and height of the video as well
  14.             var lclHeight:Number = infoObject.height;
  15.             var lclWidth:Number = infoObject.width;
  16.  
  17.             // if they are invalid, got to your default values
  18.             if(isNaN(lclHeight) || isNaN(lclWidth))
  19.             {
  20.                 lclWidth = 425;
  21.                 lclHeight= 320;
  22.             }
  23.  
  24.             // dispatch the size received event
  25.             dispatchEvent(new MediaEvent(MediaEvent.SIZE_RECEIVED, { width:lclWidth, height:lclHeight } ));
  26.             }
  27.        
  28.         // function function is on the _timer object, running 4 times per second
  29.         public function doMediaTime(evt:TimerEvent):void
  30.         {
  31.             // calculate the percentage loaded
  32.             var pct:Number = Math.round(_stream.bytesLoaded / _stream.bytesTotal * 100);
  33.            
  34.             // dispatch a TIME event containing the stream position & percentage loaded
  35.             dispatchEvent(new MediaEvent(MediaEvent.TIME, { seconds:_stream.time, loaded:pct } ));
  36.         }
  37.        
  38.         // these error handlers are basic, the listeners can catch then and handle the errors accordingly
  39.         protected function doSecurityError(evt:SecurityErrorEvent):void
  40.         {
  41.             trace("AbstractStream.securityError");
  42.             dispatchEvent(new MediaEvent(MediaEvent.ERROR, { errorEvt:evt } ));
  43.         }      
  44.  
  45.         protected function doIOError(evt:IOErrorEvent):void
  46.         {
  47.             trace("AbstractScreem.ioError");
  48.             dispatchEvent(new MediaEvent(MediaEvent.ERROR, { errorEvt:evt } ));
  49.         }
  50.        
  51.         protected function doAsyncError(evt:AsyncErrorEvent)
  52.         {
  53.             trace("AsyncError");
  54.             dispatchEvent(new MediaEvent(MediaEvent.ERROR, { errorEvt:evt } ));
  55.         }      
  56.        
  57.         // this function handles the Stream's & NetConnection's NetStatus events. They could be seperated
  58.         protected function doNetStatus(evt:NetStatusEvent):void
  59.         {
  60.             // this happens when somebody seeks to close to the end.. if it happens, revert to the last known playing position
  61.             if (evt.info.code == "NetStream.Seek.InvalidTime")
  62.             {
  63.                 _stream.seek(_lastPos);
  64.                 _stream.resume();
  65.             }
  66.             // otherwise push the code into the log and analyze the log
  67.             else
  68.             {
  69.                 pushStatus(evt.info.code);     
  70.                 analyzeStatus();
  71.             }
  72.         }

finally the function to push a status code, and analyze the log

PLAIN TEXT
Actionscript:
  1. // add the code to the log, and for the current analysis only the last 3 are needed to dump the others
  2.         protected function pushStatus(status:String):void
  3.         {
  4.             _streamStatus.push(status);
  5.             while (_streamStatus.length> 3)
  6.                 _streamStatus.shift();
  7.         }
  8.  
  9.         // this function analyzes the status code log to find when a media has really finished playing since the time values couldn't be trusted.
  10.         protected function analyzeStatus():void
  11.         {
  12.             // find the position of three important netstatus codes in the log
  13.             var stopIdx:Number = _streamStatus.lastIndexOf("NetStream.Play.Stop");
  14.             var flushIdx:Number = _streamStatus.lastIndexOf("NetStream.Buffer.Flush");
  15.             var emptyIdx:Number = _streamStatus.lastIndexOf("NetStream.Buffer.Empty");
  16.            
  17.             var mediaFinished:Boolean = false;
  18.            
  19.             // then depending if they are there, and in which order they appear, we know when a media has finished playing.
  20.             if (stopIdx> -1 && flushIdx> -1 && emptyIdx> -1)
  21.             {
  22.                 if (flushIdx <stopIdx && stopIdx <emptyIdx)
  23.                 {
  24.                     mediaFinished = true;
  25.                 }
  26.             }
  27.             else if (flushIdx> -1 && emptyIdx> -1)
  28.             {
  29.                 if (flushIdx <emptyIdx)
  30.                     mediaFinished = true;
  31.             }
  32.             else if (stopIdx> -1 && flushIdx> -1)
  33.             {
  34.                 mediaFinished = true;
  35.             }
  36.  
  37.             // if the media has finished playing, dispatch the event and clean the log
  38.             if (mediaFinished)
  39.             {      
  40.                 dispatchEvent(new MediaEvent(MediaEvent.FINISHED_PLAYING, { } ))               
  41.                 while (_streamStatus.length> 0)
  42.                     _streamStatus.pop();
  43.             }
  44.         }

The rest is here: Tutorial - Playing FLV video in plain AS3 - Part 3



Related posts (automatically generated):

  1. Tutorial - Playing FLV video in plain AS3 - Part 1
  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, , , ,

5 Responses to “Tutorial - Playing FLV video in plain AS3 - Part 2”

  1. den says:

    great tutorial !!!

    June 24th, 2008 at 3:22 pm

  2. art says:

    most comprehensive tutorial I have seen on this! any sign of a follow up?

    August 15th, 2008 at 10:21 am

  3. Andy says:

    Great tutorial, do you think you’ll have time to complete the next bit soon? :)

    Keep up the good work!

    Andy

    September 16th, 2008 at 6:57 am

  4. Sven says:

    Will the tutorial on the Event class be finished?

    September 27th, 2008 at 2:03 pm

  5. Jingtao says:

    hello, everyone! I am making a flv video player.I want to complete that click anwhere then play at the position but not care if the position in the buffered scope, I use NetStream.seek(minute), but this only userfull int the buffered scope, can anyone help me? thanks .

    November 2nd, 2009 at 6:50 pm

Leave a Reply

« Getting data from hosts that require HTTP Authentication with URLRequest in AS3 Tutorial - Playing FLV video in plain AS3 - Part 1 »