Flex Examples

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>