Search Flex Components Free

Custom Search

March 16, 2008

Displaying a video in Flex using the NetConnection, NetStream, and Video classes





The following example shows how you can display a FLV file in a Flex application using the NetConnection, NetStream, and Video classes, as well as how to use the onMetaData and onCuePoint event handlers to handle video meta data and cue points.


Full code after the jump.


View MXML


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


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="vertical"

verticalAlign="middle"

backgroundColor="white"

creationComplete="init();">



<mx:Script>

<![CDATA[

import mx.utils.ObjectUtil;



private var nc:NetConnection;

private var ns:NetStream;

private var video:Video;

private var meta:Object;



private function init():void {

var nsClient:Object = {};

nsClient.onMetaData = ns_onMetaData;

nsClient.onCuePoint = ns_onCuePoint;



nc = new NetConnection();

nc.connect(null);



ns = new NetStream(nc);

ns.play("http://www.helpexamples.com/flash/video/cuepoints.flv");

ns.client = nsClient;



video = new Video();

video.attachNetStream(ns);

uic.addChild(video);

}



private function ns_onMetaData(item:Object):void {

trace("meta");

meta = item;

// Resize Video object to same size as meta data.

video.width = item.width;

video.height = item.height;

// Resize UIComponent to same size as Video object.

uic.width = video.width;

uic.height = video.height;

panel.title = "framerate: " + item.framerate;

panel.visible = true;

trace(ObjectUtil.toString(item));

}



private function ns_onCuePoint(item:Object):void {

trace("cue");

}

]]>

</mx:Script>



<mx:Panel id="panel" visible="false">

<mx:UIComponent id="uic" />

<mx:ControlBar>

<mx:Button label="Play/Pause" click="ns.togglePause();" />

<mx:Button label="Rewind" click="ns.seek(0); ns.pause();" />

</mx:ControlBar>

</mx:Panel>



</mx:Application>

Related Flex Tutorials