Testing a cool AS3-based video player

Martin Legris created a great little Actionscript-only AS3 Video player:

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.

His tutorial came in three parts, with final code located here, in Part 3.

Here’s a quick little Client class I wrote as an Actionscript Project in Flex Builder 3. If you’re using the Flash IDE, just use this as the Document Class. If you’re using FlashDevelop — you know what to do. This code can be used to test the code in Part 3:

package {

	import ca.newcommerce.media.FLVPlayer;
	import ca.newcommerce.media.MediaData;

	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.media.Video;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;

	public class FLVPlayerTest extends Sprite
	{
		private var myData:MediaData;
		private var vid:Video;
		private var myPlayr:FLVPlayer;
		private var txtBox:TextField;
		private var txtBox2:TextField;

		//in real life, populate this array from an external data source
		private var trackArray:Array = ["http://www.helpexamples.com/flash/video/clouds.flv",
             "http://www.helpexamples.com/flash/video/typing_short.flv",
             "http://www.helpexamples.com/flash/video/sheep.flv",
             "http://www.helpexamples.com/flash/video/water.flv",										       "http://www.helpexamples.com/flash/video/cuepoints.flv"];

		public function FLVPlayerTest()
		{
			inti();
			addBasicMenu();
		}

		public function inti():void
		{
			//start the player
			myData = new MediaData(trackArray[0], "some title", 300, "image.jpg", 320, 200);
			myPlayr = new FLVPlayer();
			vid = new Video(320, 200);

			myPlayr.video = vid;
			myPlayr.playMedia(myData);

			stage.addChild(vid);
		}

		public function addBasicMenu():void
		{
			//add some simple text boxes to test loading other videos
			txtBox2 = new TextField();
         	txtBox2.y = vid.height + 20;
         	txtBox2.autoSize = TextFieldAutoSize.LEFT;
         	txtBox = new TextField();
         	txtBox.autoSize = TextFieldAutoSize.LEFT;
         	txtBox.multiline = true;
         	txtBox.x = vid.x;
         	txtBox.y = txtBox2.y + 20;
         	txtBox.mouseEnabled = true;
         	stage.addChild(txtBox);
         	stage.addChild(txtBox2);

         	txtBox2.text = "Click a line below to load another movie:\n\n";

         	txtBox.appendText("line one\n");
         	txtBox.appendText("line two\n");
         	txtBox.appendText("line three\n");
         	txtBox.appendText("line four\n");
         	txtBox.appendText("line five\n");

			txtBox.addEventListener(MouseEvent.CLICK, handleClick, false, 0, true);
		}

		public function handleClick(e:MouseEvent):void
		{
			//tells us what line of the text box was clicked by the mouse
			var lineIndx:int = txtBox.getLineIndexAtPoint(e.target.mouseX, e.target.mouseY);

			trace(lineIndx);
			switch(lineIndx)
			{
				case 0:
					changeVid(trackArray[lineIndx]);
					break;
				case 1:
					changeVid(trackArray[lineIndx]);
					break;
				case 2:
					changeVid(trackArray[lineIndx]);
					break;
				case 3:
					changeVid(trackArray[lineIndx]);
					break;
				case 4:
					changeVid(trackArray[lineIndx]);
					break;
			}
		}

		public function changeVid(v:String, t:String="", l:int=120, img:String="", w:int=320, h:int=200):void
		{
			//calls the get uri() function of the MediaData class,
			//since myData is an instance of (or object of type) MediaData
			myData.uri = v;
			myData.title = t; // get title();
			myData.duration = l; // get duration();
			myData.width = w;
			myData.height = h;
			myPlayr.play(false);

		}
	}
}

I guess FLVPlayerTest(), as it’s written above, can be considered a View and a Controller in an MVC pattern. It can be a Controller, because of the handleClick() & changeVid() functions that tell the model to update itself. addBasicMenu() could be part of the Controller, since it ads a visual element whose sole purpose is to receive user input (mouse click events) and then tell the Model to update itself. Then again… it can also be part of the View, since it’s a visual component that the user sees and code associated with it can be considered to be display logic. In the MVC chapter of Advanced ActionScript 3 with Design Patterns by Joey Lott and Danny Patterson, put similar visual elements into their Controller. In their Clock example, the Controller class includes code for the button that toggles between Views and text fields that tell the Model to update itself based on user input.

If I add buttons to control play, pause, volume, those would be part of the Controller as well, if we stick with the example from Joey Lott and Danny Patterson.

Although the FLVPlayer class feels like a Controller, it’s actually the main part of the Model. If this was a middleware application, it would be the DB class, or the class that has all bulk of the app’s business logic. It would contain the CRUD methods that interact with the Database (in this case the video data source).

MediaData is part of the Model too. It encapsulates the properties of a video, like uri, image, title, duration, etc. The trackArray is part of how the View stores info from the Model, or at least, it would be, if it was coming from an external source. In real life it would be an Array of MediaData objects. I’m thinking of how in Budi Kurniawan‘s simple servlet-based MVC application a Database class (Model) grabs info from the database (external source) and instantiates objects (part of Model) that store the DB data for use by the application. In the same servlet app, the View then runs a foreach loop and populates a collection object like a List, HashMap or Vector with all the objects instantiated by the DB class.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s