Flex Examples

I was experimenting with the VideoDisplay control the other day and built this simple little example to help me understand the order of events when loading a Flash Video (FLV).

The following example creates a VideoDisplay control and displays each event in a debugging DataGrid which displays the type of event, video state, playhead time, and total time of the FLV:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white" creationComplete="init();"> 

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.CuePointEvent;
            import mx.events.VideoEvent; 

            [Bindable]
            private var arrColl:ArrayCollection; 

            [Bindable]
            private var FLV_URL:String = "http://www.helpexamples.com/flash/video/clouds.flv"; 

            /**
             * Initialize the ArrayCollection object.
             */
            private function init():void {
                arrColl = new ArrayCollection();
            } 

            private function doVideoEvent(evt:VideoEvent):void {
                doAddItem({type:evt.type});
            } 

            private function doCuePointEvent(evt:CuePointEvent):void {
                doAddItem({type:evt.type});
            } 

            private function doProgressEvent(evt:ProgressEvent):void {
                doAddItem({type:evt.type});
            } 

            /**
             * Add the item to the ArrayCollection instance, revalidate the DataGrid control, and scroll to the last item in the DataGrid.
             */
            private function doAddItem(obj:Object):void {
                arrColl.addItem({type:obj.type, state:videoDisplay.state, playheadTime:videoDisplay.playheadTime, totalTime:videoDisplay.totalTime});
                dataGrid.validateNow();
                dataGrid.selectedIndex = arrColl.length;
                dataGrid.scrollToIndex(arrColl.length);
            }
        ]]>
    </mx:Script> 

    <mx:VideoDisplay id="videoDisplay" source="{FLV_URL}" autoPlay="false" autoRewind="false"
            ready="doVideoEvent(event);"
            rewind="doVideoEvent(event);"
            playheadUpdate="doVideoEvent(event);"
            close="doVideoEvent(event);"
            complete="doVideoEvent(event);"
            progress="doProgressEvent(event);" /> 

    <mx:HBox>
        <mx:Button label="play()" click="videoDisplay.play();" />
        <mx:Button label="pause()" click="videoDisplay.pause();" />
        <mx:Button label="stop()" click="videoDisplay.stop();" />
    </mx:HBox> 

    <mx:DataGrid id="dataGrid" dataProvider="{arrColl}" width="320" rowCount="5">
        <mx:columns>
            <mx:DataGridColumn id="typeCol" dataField="type" headerText="Evt. type" />
            <mx:DataGridColumn id="stateCol" dataField="state" />
            <mx:DataGridColumn id="playheadTimeCol" dataField="playheadTime" textAlign="right" />
            <mx:DataGridColumn id="totalTimeCol" dataField="totalTime" textAlign="right" />
        </mx:columns>
    </mx:DataGrid> 

</mx:Application>