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 serverflash.net.NetStream-- to "stream" or download the media from the HTTP serverflash.media.SoundTransform-- to modify the volume at which the FLV is playingflash.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-- onNetConnectionflash.events.IOErrorEvent-- onNetConnectionANDNetStreamflash.events.AsyncErrorEvent-- onNetStream
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..
-
var connection:NetConnection;
-
var stream:NetStream;
-
var video:Video;
-
-
// first let's create the NetConnection
-
connection = new NetConnection();
-
-
// let set it to HTTP "streaming" mode, the null is to specify we are NOT connecting to a media server
-
connection.connect(null);
-
-
// now let's create the NetStream
-
stream = new NetStream(connection);
-
-
// the set it's client to receive certain events
-
stream.client = this;
-
-
// create a video object, set it to 425x320 as default size, this holds the visual representation of the video
-
var video:Video = new Video(425, 320);
-
-
// add it to the stage
-
stage.addChild(video);
-
-
// attach the NetStream to the video object
-
video.attachNetStream(stream);
-
-
// let's set the default buffer time to 1 second
-
stream.bufferTime = 1;
-
-
// tell the stream to receive the audio
-
stream.receiveAudio(true);
-
-
// tell the stream to receive the video
-
stream.receiveVideo(true);
-
-
// play a FLV file on a HTTP server
-
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
-
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:
-
public function onMetaData(infoObject:Object):void
-
{
-
if(infoObject.duration != null)
-
{
-
trace("our video is "+infoObject.duration+" seconds long");
-
}
-
-
if(infoObject.height != null && infoObject.width != null)
-
{
-
trace("our video is "+infoObject.height+"x"+infoObject.width+" pixels");
-
-
// here you want to resize your video object to match there dimensions
-
video.height = infoObject.height;
-
video.width = infoObject.width;
-
// for example
-
}
-
}
Handling Events & Errors
Both the NetStream and NetConnection objects throw errors.
-
// on the NetConnection
-
connection.addEventListener(NetStatusEvent.NET_STATUS, doNetStatus);
-
connection.addEventListener(IOErrorEvent.IO_ERROR, doIOError);
-
connection.addEventListener(SecurityErrorEvent.SECURITY_ERROR, doSecurityError);
-
-
// on the NetStream
-
stream.addEventListener(AsyncErrorEvent.ASYNC_ERROR, doAsyncError);
-
stream.addEventListener(NetStatusEvent.NET_STATUS, doNetStatus);
-
stream.addEventListener(IOErrorEvent.IO_ERROR, doIOError);
-
-
protected function doSecurityError(evt:SecurityErrorEvent):void
-
{
-
trace("AbstractStream.securityError:"+evt.text);
-
// when this happens, you don't have security rights on the server containing the FLV file
-
// a crossdomain.xml file would fix the problem easily
-
}
-
-
protected function doIOError(evt:IOErrorEvent):void
-
{
-
trace("AbstractScreem.ioError:"+evt.text);
-
// there was a connection drop, a loss of internet connection, or something else wrong. 404 error too.
-
}
-
-
protected function doAsyncError(evt:AsyncErrorEvent)
-
{
-
trace("AsyncError:"+evt.text);
-
// this is more related to streaming server from my experience, but you never know
-
}
-
-
protected function doNetStatus(evt:NetStatusEvent):void
-
{
-
trace(evt.info.code);
-
// this will eventually let us know what is going on.. is the stream loading, empty, full, stopped?
-
}
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):
- Tutorial - Playing FLV video in plain AS3 - Part 2
- Tutorial - Playing FLV video in plain AS3 - Part 3 (Updated)
- Tutorial - Playing FLV video in plain AS3 - Part 4 - Sample Usage
Thank you for a really enlightening articles series!
October 1st, 2008 at 2:45 pm
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
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
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
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
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
should add:
public function onXMPData(infoObject:Object):void { }
to FLVPlayer, to silence the onXMPData error
January 17th, 2010 at 11:14 pm
[...] As part of our anti-spam campaign, please input the text you see in this image (required) …intense creativity Tutorial - Playing FLV video in plain …today I will explain how to play .FLV files that are hosted on a standard HTTP server, no … You [...]
April 4th, 2010 at 2:40 pm
good utorial.
i am looking forward to get my hands on the next part.
April 20th, 2010 at 3:41 am
good tutorial.
i am looking forward to get my hands on the next part.
April 20th, 2010 at 3:42 am
Thanks this tutorial, much easy to use than origin description in help.
June 10th, 2010 at 7:27 am