Full code after the [...]]]> A simple example of creating and using ActionScript cue points with the VideoDisplay control. The example uses a VideoDisplay control to display the progressively downloaded video, a ProgressBar to display the amount of video that has played back, and two DataGrid controls to show ActionScript cue points and embedded cue points.

Full code after the jump.

The following example creates a series of ActionScript cue points using the <mx:Array> tag and adds them to the VideoDisplay control by setting its cuePoints property. It also demonstrates how you can use a ProgressBar control to display the video playback status using the playheadUpdate event and the ProgressBar control’s label property:

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

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

            [Bindable]
            private var embeddedCuePoints:ArrayCollection = new ArrayCollection();

            private function onCuePoint(evt:CuePointEvent):void {
                var cuePointObject:Object = {name:evt.cuePointName, time:evt.cuePointTime, type:evt.cuePointType};
                if (evt.cuePointType != "actionscript") {
                    embeddedCuePoints.addItem(cuePointObject);
                }
            }
        ]]>
    </mx:Script>

    <mx:Array id="cuePointArr">
        <mx:Object name="one" time="1" type="actionscript" />
        <mx:Object name="two" time="2" type="actionscript" />
    </mx:Array>

    <mx:VideoDisplay id="videoDisplay" cuePointManagerClass="mx.controls.videoClasses.CuePointManager" cuePoints="{cuePointArr}" cuePoint="onCuePoint(event)" source="http://www.helpexamples.com/flash/video/cuepoints.flv" playheadUpdate="progressBar.setProgress(videoDisplay.playheadTime, videoDisplay.totalTime);" />
    <mx:ProgressBar id="progressBar" mode="manual" width="{videoDisplay.width}" minimum="0" maximum="{videoDisplay.totalTime}" label="{videoDisplay.state} %3%%" />

    <mx:HBox>
        <mx:Panel title="ActionScript cue points:">
            <mx:DataGrid id="actionScriptCuePointGrid" dataProvider="{videoDisplay.cuePoints}">
                <mx:columns>
                    <mx:DataGridColumn dataField="name" headerText="Name:" />
                    <mx:DataGridColumn dataField="time" headerText="Time:" />
                    <mx:DataGridColumn dataField="type" headerText="Type:" />
                </mx:columns>
            </mx:DataGrid>
        </mx:Panel>

        <mx:Panel title="Embedded cue points:">
            <mx:DataGrid id="embeddedCuePointGrid" dataProvider="{embeddedCuePoints}" itemClick="videoDisplay.playheadTime = event.currentTarget.selectedItem.time;">
                <mx:columns>
                    <mx:DataGridColumn dataField="name" headerText="Name:" />
                    <mx:DataGridColumn dataField="time" headerText="Time:" />
                    <mx:DataGridColumn dataField="type" headerText="Type:" />
                </mx:columns>
            </mx:DataGrid>
        </mx:Panel>
    </mx:HBox>

</mx:Application>

If you prefer to define the cue point array in ActionScript rather than MXML, you could use this snippet instead:

[Bindable]
private var cuePointArr:Array = [{name:"one", time:1, type:"actionscript"}, {name:"two", time:2, type:"actionscript"}];

Or…

[Bindable]
private var cuePointArr:Array;

private function initCuePoints():void {
    cuePointArr = new Array();
    cuePointArr.push({name:"one", time:1, type:"actionscript"});
    cuePointArr.push({name:"two", time:2, type:"actionscript"});
    videoDisplay.cuePoints = cuePointArr;
}

You can also define the ActionScript cue points directly within the VideoDisplay MXML tags, like so:

<mx:VideoDisplay id="videoDisplay" cuePointManagerClass="mx.controls.videoClasses.CuePointManager" cuePoint="onCuePoint(event)" source="http://www.helpexamples.com/flash/video/cuepoints.flv" playheadUpdate="progressBar.setProgress(videoDisplay.playheadTime, videoDisplay.totalTime);">
    <mx:cuePoints>
        <mx:Object name="one" time="1" type="actionscript" />
        <mx:Object name="two" time="2" type="actionscript" />
    </mx:cuePoints>
</mx:VideoDisplay>

 

The following example creates a VideoDisplay control and displays each event in a debugging DataGrid which displays the type of event, video state, playhead [...]]]> 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>

 

Full code after the jump.