AdvancED Flex 4

CHAPTER 14

484

Figure 14-5. A generic music player application

Creating a Video Player for Flash 10

To create a simple, custom video player for Flash 10, we’ll use Flash Builder 4.

Open Flash Builder 4 or Eclipse with the Flex plug-in. Select File

➤ New ➤ Flex Project. Set the project

name to VideoPlayerExample, and use the Flex 4 SDK in Flex SDK version. Select Finish to create the

project.

Paste the following code into the VideoPlayerExample.mxml file.

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="1024" minHeight="768"

creationComplete="creationCompleteHandler(event)">

<fx:Script>

<![CDATA[

import mx.events.FlexEvent;

import utils.CustomStreamClient;

private var videoURL:String = "http://foreversideways.simplespider.co.uk/

flv/cm_snowmonte.flv";

private var connection:NetConnection;

private var netStream:NetStream;

protected function creationCompleteHandler(event:FlexEvent):void

{

connection = new NetConnection();

connection.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);

connection.addEventListener(SecurityErrorEvent.SECURITY_ERROR,

securityErrorHandler);

connection.connect(null);

}

private function setNetStream():void

FACILITATING AUDIO AND VIDEO

485

{

netStream = new NetStream(connection);

netStream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);

netStream.addEventListener(IOErrorEvent.IO_ERROR, onNetworkError);

netStream.client = new CustomStreamClient();

var video:Video = new Video();

video.attachNetStream(netStream);

netStream.play(videoURL);

netStream.seek(0.01);

netStream.pause();

component.addChild(video);

}

private function netStatusHandler(event:NetStatusEvent):void

{

switch (event.info.code)

{

case "NetConnection.Connect.Success":

{

playButton.enabled = true;

this.setNetStream();

break;

}

case "NetStream.Play.StreamNotFound":

{

trace("StreamNotFound: " + videoURL);

break;

}

case "NetStream.Buffer.Full":

{

trace("bufferLength:"+netStream.bufferLength);

break;

}

case "NetStream.Buffer.Flush":

{

trace(event.info.code);

break;

}

case "NetStream.Seek.Notify":

{

trace(event.info.code);

break;

}

case "NetStream.Buffer.Empty":

{

trace(event.info.code);

break;

}

}

}

CHAPTER 14

486

private function securityErrorHandler(event:SecurityErrorEvent):void

{

trace( "securityError: " + event.toString() );

}

private function onNetworkError(event:IOErrorEvent):void

{

trace( "NetworkError: " + event.toString() );

}

]]>

</fx:Script>

<s:VGroup>

<mx:UIComponent id="component" width="200" height="240" />

<s:Button id="playButton" label="Play"

click="netStream.resume()"

enabled="false" />

</s:VGroup>

</s:Application>

Once you compile and run this application, you’ll be able to view the video playback. Let’s examine the

code.

The application starts by setting the creation complete event to call creationCompleteHandler method.

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="1024" minHeight="768"

creationComplete="creationCompleteHandler(event)">

<fx:Script>

<![CDATA[

We set global parameters that we will use in our application, such as the video URL location, the

NetConnection and NetStream.

private var videoURL:String =

"http://foreversideways.simplespider.co.uk/flv/cm_snowmonte.flv";

private var connection:NetConnection;

private var netStream:NetStream;

creationCompleteHandler is called once the component finishes the tasks of processing, measuring,

layout, and drawing. At this point, we create the net connection and set event listeners for the messages to

know when the connection is ready, as well as error messages due to security restrictions.

protected function creationCompleteHandler(event:FlexEvent):void

{

FACILITATING AUDIO AND VIDEO

487

connection = new NetConnection();

connection.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);

connection.addEventListener(SecurityErrorEvent.SECURITY_ERROR,

securityErrorHandler);

connection.connect(null);

}

The netStatusHandler method will handle messages coming from the NetConnection object. We are

using a switch to handle the different messages. We won’t go into detail regarding these common

messages now; the names of the event constants are self-explanatory. Later in this chapter we’ll discuss

what these messages mean.

private function netStatusHandler(event:NetStatusEvent):void

{

switch (event.info.code)

{

Once the connection is established correctly, we call the setNetStream method. When the connection is

established, we call the method to set the net stream, and the user is able to play the video. We set the

playButton-enabled property to true so the user can click the play button and view the video.

case "NetConnection.Connect.Success":

{

playButton.enabled = true;

this.setNetStream();

break;

}

case "NetStream.Play.StreamNotFound":

{

trace("StreamNotFound: " + videoURL);

break;

}

case "NetStream.Buffer.Full":

{

trace("bufferLength:"+netStream.bufferLength);

break;

}

case "NetStream.Buffer.Flush":

{

trace(event.info.code);

break;

}

case "NetStream.Seek.Notify":

{

trace(event.info.code);

break;

}

case "NetStream.Buffer.Empty":

{

trace(event.info.code);

break;

}

}

}