I’ve been thinking for a while to build a nice tutorial for creating a complex video player from scratch and now i just got a little time to make it. I planned to divide into several parts.At this moment i am not sure of the exact number of parts, but i will see on the way. Of course we will begin with Part 1;)

Into this part we will learn how to play a FLV file, in the most basic way.

First of all, create a new actionscript file (.as) and name it FlvPlayer.as. Insert this code into it:

package am.video{	
 
	import am.events.FlvPlayerEvent;
 
	import flash.display.Sprite;
	import flash.events.*;
	import flash.media.Video;
	import flash.net.NetConnection;
	import flash.net.NetStream;
 
	public class FlvPlayer extends Sprite {
 
		private var __connection: NetConnection;
		private var __stream: NetStream;
		private var __video: Video;
		private var __width:Number, __height: Number;
		private var __mediaUrl: String;
		private var __duration: Number;
 
		public function FlvPlayer(w:Number, h:Number) {
 
			// * setting the width & height
			__width = w
			__height = h;	
 
			// * creating the video object and attaching it
			__video = new Video(w,h);
			this.addChild(__video);
 
			createNetConnection();
		}
 
		/**
		This function creates the net connection and prepares it for progressive download
		*/
		private function createNetConnection():void {
 
			// * creates a new NetConnection
			__connection = new NetConnection();
 
			// * adding events to call
			__connection.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);			
 
			// * for progressive playback
			__connection.connect(null);
		}
 
		/**
		Triggers the load of new flv
		@param url: the url to the flv
		*/
		public function loadMedia(url: String):void {
			__mediaUrl = url;		
 
			// * we call this function in order to close
			// * any previous possibly opened streams;
			closeMedia();
 
			// * creating the NetStream
			__stream = new NetStream(__connection);
			__stream.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);
			__stream.client = this;
 
			// * attach  stream to video object
			__video.clear();
			__video.attachNetStream(__stream);
 
			// * start playing the flv file
			__stream.play(url);
 
			//dispatchEvent(new FlvPlayerEvent(FlvPlayerEvent.MEDIA_LOADING));
		}
 
		/**
		Close any exitings streams
		*/
		public function closeMedia():void {
			if (__stream!=null) {
				__stream.close();
				this.dispatchEvent(new FlvPlayerEvent(FlvPlayerEvent.MEDIA_CLOSED,{}));
			}
		}
 
		// * EVENTS SECTION		
 
		/**
		Invoked each time when a new status or error appears for NetConnection object
		@param e: NetStatusEvent
		*/
		private function onNetStatus(e: NetStatusEvent):void {
			switch (e.info.code) {
				case "NetConnection.Connect.Success" :
					break;
				case "NetConnection.Connect.Failed" :
					break;
			}
			this.dispatchEvent(new FlvPlayerEvent(FlvPlayerEvent.ON_NET_STATUS,{obj:e}));
		}
 
		public function onMetaData(info:Object):void {
			__duration=info.duration;
			this.dispatchEvent(new FlvPlayerEvent(FlvPlayerEvent.ON_METADATA,{}));
		}
 
	}
}

Now let’s see whats all about this code. First please observe that this class its under package am.video. Please change this appropriately to your situation.

In the constructor function we create the video object, set the width and height, and also we call the function createNetConnection() that will actually create the NetConnection object. In this function we have a strange line __connection.connect(null). What it actually does this? So, by calling the connect method of NetConnection object with a null parameter, will prepare us for a progressive download method of playing the flv file.

As you see, i have mentioned about progressive download. So what is this? Before i will try to explain i must introduce another term: streaming.

Streaming is the only way to present live feeds and support broadcasts and multicasts (sending one stream to many viewers). Streaming allows broadcasts to run as long as is needed. One of the primary goals of streaming video is to maintain real-time playback at various connection speeds.

In a progressive download, content must be buffered (preloaded) before a recipient can play it. Content plays as soon as it is available, so on fast enough connections, progressive movies can appear to be streaming. However, if a user wants to jump ahead half an hour in such a presentation, he or she must download everything from the point currently in view to the point of interest. So, now that we are clear what its progressive download let’s continue.

I created a function called loadMedia(url). Basically it loads a flv file and plays it. Let’s look dipper into it. We create a NetStream object, and we attach this stream to the video object we have previously created, and then we play the flv. Note that before any of these, we close the stream by calling the closeMedia() function. We do this, because we want that NetStream to be prepared to play a new flv, and to stop loading of old flv files.

Another aspect that i need to mention its dispatching events. You will see that any major event we will dispatch it, so when using this class it would be much easier to listen from exterior a dispatch of an onMetaData event.

Now, let’s how we can make use of this class. Please create a new fla, and in the Document Class section please write part1Class. This means we need to create a new actionscript file (.as) and name it part1Class, and this will be the document class. Here how it looks like:

package {
	import flash.display.Sprite;
	import flash.events.*
 
	import am.events.FlvPlayerEvent;
	import am.video.FlvPlayer;
 
	public class Video_Player_part1 extends Sprite {
 
		private var __player:FlvPlayer;		
 
		public function Video_Player_part1() {	
 
			// * creating our flv player by making an instance of FlvPlayer class
			this.addChild(__player = new FlvPlayer(640,480));
 
			// * adding events listeners
			__player.addEventListener(FlvPlayerEvent.ON_NET_STATUS, onNetStatus)
 
			// * playing a flv file
			__player.loadMedia("http://www.helpexamples.com/flash/video/sheep.flv");
		}		
 
		// * EVENTS SECTION
		/**
		Called if the NetConnection its successfully done
		*/
		private function onNetStatus(evt: FlvPlayerEvent): void {
			trace(evt.params.obj.info.code)
		}
 
	}
}

Basically i create an instance of FlvPlayer class, with the parameters for width and height being 640 and 480. We add an event listener, to listen for onNetStatus event. So, this its the way we can dispatch and listen for custom events from a class. FlvPlayerEvent its a class that extends Event class, and contains all major events that occurs in FlvPlayer. What’s left to do, you guessed it, load a flv file. And we are done!
From HERE you can download the sources for part 1 of this tutorial. These are made as an actionscript project using FLEX 3.

In the next part, we will add controls (play/pause, load, progress bar), then it will actually look like a real video player;)

Until next time, have fun coding!