NetStream FLV Player Tutorial

[mTorbin]

Hey all,

Unfortunately I don't have my book with me today and I've been scouring the web to try and find a non-confusing example of a video player using NetStream because I think that the answer to my other post will be resolved if I build my video player this way. Does anyone have any suggestions? Again, this is just for testing purposes, so it doesn't have to be pretty.

Thanks

- MT

[meddlingwithfir]

I built this example this morning when troubleshooting my own player. It's using flex components to wrap the AS, but you can pull it out easily enough:


<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
initialize="onInitialize();"
>
<mx:UIComponent id="uiComponent">

</mx:UIComponent>
<mx:Script>
<![CDATA[
private var _connection:NetConnection;
private var _stream:NetStream;
private var _video:Video;
private var _updateTimer:Timer;
private var _metaData:Object;

private function onInitialize():void
{
_connection = new NetConnection();
_connection.addEventListener(NetStatusEvent.NET_ST ATUS, onConnectionNetStatus, false, 0, true);
_connection.addEventListener(SecurityErrorEvent.SE CURITY_ERROR, onConnectionError, false, 0, true);
_connection.addEventListener(AsyncErrorEvent.ASYNC _ERROR, onConnectionError, false, 0, true);
_connection.addEventListener(IOErrorEvent.IO_ERROR , onConnectionError, false, 0, true);
_connection.objectEncoding = ObjectEncoding.DEFAULT;
_connection.client = {
onBWDone: onBWDone
};
//_connection.connect("rtmp://yourfmshere/");
_connection.connect(null);
}

private function onConnectionError(...args):void
{
trace("Test.onConnectionError()");
}

private function onConnectionNetStatus(event:NetStatusEvent):void
{
var debug:Object = event.info;
switch (event.info.code)
{
case "NetConnection.Connect.Success":
_stream = new NetStream(_connection);
_stream.client = {
onMetaData: onMetaData,
onCuePoint: onCuePoint
};

_video = new Video();
uiComponent.addChild(_video);
_video.attachNetStream(_stream);
//_stream.play("sample", 0);
_stream.play("content/test.flv");

_updateTimer = new Timer(250, 0);
_updateTimer.addEventListener(TimerEvent.TIMER, onUpdateTimer);
_updateTimer.start();

break;
case "NetConnection.Connect.Closed":
break;
/* Fatal errors */
case "NetConnection.Connect.Rejected":
case "NetConnection.Connect.Failed":
break;
default:
break;
}
}

private function onBWDone(...args):void
{
trace("Test.onBWDone()");
}

private function onMetaData(...args):void
{
trace("Test.onMetaData()");
_metaData = args[0];
}

private function onCuePoint(...args):void
{
trace("Test.onCuePoint()");
}

private function onUpdateTimer(event:TimerEvent):void
{
trace("Test.onUpdateTimer()");
trace("\t"+_stream.bytesLoaded+" of "+_stream.bytesTotal+" bytes loaded.");
trace("\t"+_stream.time+" of "+_metaData.duration+" played.");
trace("\t_stream.bufferLength:"+_stream.bufferLength);

if (_stream.time >= _metaData.duration)
{
_updateTimer.removeEventListener(TimerEvent.TIMER, onUpdateTimer);
_updateTimer = null;
}
}
]]>
</mx:Script>
</mx:Application>

[mTorbin]

Thank you for this, though I'm a bit new to the whole AS3 thing. Don't I simply need to create a NetStream, a NetConnection and a FlashPlayer?

- MT

[meddlingwithfir]

It depends on which route you are taking. I assumed you wanted to build your own player, since you asked specifically about NetStream.

If you use the FLVPlayer class, you don't need to touch NetStream or NetConnection. FLVPlayer handles everything for you. It also adds about 32k to your swf size. Ouch.

If you don't like that overhead, you can use the VideoPlayer class. Again, you don't need to touch NetStream or NetConnection when you use this. It handles creating those for you. But it is not as feature-rich as the FLVPlayer is, and still not terribly light.

If you want an even leaner video-processing machine, you roll your own. And you manually create your NetStream, NetConnection, and Video instances. The code I posted followed this path.

If you want code for the other two options, head over to the API, and look at the examples Adobe posted:

FLVPlayback
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/video/FLVPlayback.html

VideoPlayer
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/fl/video/VideoPlayer.html

[mTorbin]

Let me rephrase a bit. We have to test a few actions and what happens when they're called. We already have a fully customized player, but we need something simple to test with. We need to test pause, play and stop all of which I've built with FLVPlayback and all of which we can test. The problem comes with testing when the video has played 25%, 50%, 75% and 100% respectively. From what i understand you can't do this (i.e. add a listener for this) using FLVPlayback... or can you?

- MT

[flamingsquirrel]

meddlingwithfir - many thanks this is exactly what I have been looking for.

A great help.