Create an advanced XML Video Gallery part 1

This is the first tutorial of the series how to create an advanced XML Video Gallery, consisting of three parts. Currently we need to cover some basics of how to create a Video Player that is connected with XML and plays .flv files.

To handle this, we use Flash, Flash Develop and AS3 and also we need to have some knowledge’s about Class Paths and Packages, Caurina and SWC files. Note: I’m not willing to use a FLVPlayback component.


Preview the final result


What is Flash Video

Flash Video is a container file format used to deliver video over the Internet using Adobe Flash Player versions 6–10. Flash Video content may also be embedded within SWF files. There are two different video file formats known as Flash Video: FLV and F4V. The audio and video data within FLV files are encoded in the same way as they are within SWF files. The latter F4V file format is based on the ISO base media file format and is supported starting with Flash Player 9 update 3. You can found more info about this here.


Loading a Video

To load and playback a Video we need to use a NetStream object, which require to pass it a NetConnection object.

var videoConnection:NetConnection= new NetConnection();
videoConnection.connect(null)//for progressive download video use a null connection string

Now that you’ve constructed a NetConnection object and called the connect() method with a null value, we need to pass the NetStream consctructor a reference to the him:

var videoStream:NetStream = new NetStream(videoConnection);

Next Step is to add a Video object, and to associate this with the NetStream:

var video = new Video();
addChild(video);

Optional you can associate a NetStream object with a Video object using the Video object’s attachNetStream():

video.attachNetStream(videoStream);

Finally we need to tell to the Flash Player to load the video and to start the playback, both accomplished with one simple method called play:

videoStream.play("flv path);//the parameter can be absolute or relative

Flash video playback starts automatically as soon as enough has buffered. You can control buffering and monitor loading, using a preloader for example. Last point, if the FLV contains metadata or/and cue points and you don’t handle the events, Flash Player throws errors.

var client = new Object();
client.onMetaData = onMetaData;
videoStream.client =client;

Creating the Flash file

Now that you have an idea about how this works, let’s create a Video Player.  After you read this post called ClassPaths and Packages in Adobe Flash Cs5, create a new Flash file with dimensions 590x300px. Then use the Rectangle Tool(R) to draw a rectangle, let’s say 320x240px, convert this to be MovieClip linked with a class “Videoplayer”  that will be created later. We’ll use this MovieClip as container for Video Player.


Building Classes

In FlashDevelop create a new ActionScript file Videoplayer that was linked in Flash, when you create the Video Players container and let’s apply what we’ve learned. Save this file in a new folder called src. Then declare variables:

private var videoConnection:NetConnection;
private var videoStream:NetStream;
private var video:Video;
private var client:Object;

New features was added in latest version of FlashDevelop, which I’m proud, as you observe in the constructor function.

public function VideoPlayer():void {
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

Instantiate all classes imported:

removeEventListener(Event.ADDED_TO_STAGE, init);
		videoConnection = new NetConnection();
			videoConnection.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
			videoConnection.connect(null);
		videoStream = new NetStream(videoConnection);
			videoStream.addEventListener(NetStatusEvent.NET_STATUS, netStatus);
			videoStream.client = this;
			video = new Video();
			addChild(video);
			video.attachNetStream(videoStream);
			videoStream.play("../videos/video1.flv");
			video.smoothing = true;
			client = new Object();
			client.onMetaData = onMetaData;
			videoStream.client = client;

The netStatus function for NetConection and NetStream listeners:

private function netStatus(e:NetStatusEvent):void
		{
			switch (e.info.code) {
				case "NetStream.Play.StreamNotFound"
					//"Stream not found";
				break;
			case "NetStream.Play.Stop"
					//"Stream stopped";
				break;
			}
		}

And finally the MetaData function:

public function onMetaData(info:Object):void {
	//video info
}

Save all files, compile and let’s see the final result.

Let me know, keep sending me emails and comments, I would love to hear them. Next time we’ll load videos from XML and add buttons to control this Video Player.


Twitter Digg Delicious Stumbleupon Technorati Facebook

One Response to “Create an advanced XML Video Gallery part 1”

  1. Thank you very much… It is very useful to me…!!