Creating ActionScript cue points with the VideoDisplay control

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>

15 thoughts on “Creating ActionScript cue points with the VideoDisplay control

  1. Yes, sounds good, but what I am looking for is a way to READ embedded FLV-cuePoints and put’em into a list. Furthermore it would be nice to reference the flv video source by a flashvar

    source=”file”

    then file would be a flashvar.

    cheers, Florian

  2. I tryed your solution today, and I maybe found a bug. If you click on an embedded cue point, another cuePoint is added to the grid. Is that correct?

  3. Yeah, it would be a bug in my sloppy code. I didn’t bother to check if a specific cue point already existed before pushing it on to the embeddedCuePoints ArrayCollection.

  4. Okay, I should use that too.
    Another Question: I want to cuePoint TIME and NAME set by flashvars…so that you can set them dynamically…

    cheers, Flo

  5. Florian,

    You want to set one cue point, or multiple cue points?

    Update: Check out “Dynamically creating ActionScript cue points from FlashVars received from the HTML container” for one solution. Basically you just define the “FlashVars” parameter in your <object /> and <embed /> code, or from within your AC_FL_RunContent() JavaScript function in your HTML template, and pass something like the following:

    "FlashVars", "cuepoints=one:1;two:2;three:3"

    This will create three cue points in your Flex application:

    • Cue point name “one” at 1.0 seconds
    • Cue point name “two” at 2.0 seconds
    • Cue point name “three” at 3.0 seconds

    Of course, you’ll need a bit more code in your Flex application, so check out the post for the full details.

    Happy Flexing!

  6. Hello,
    I appreciate your code for my comprehension of VideoDisplay.

    I’m trying to use it with this URL :

    source=”http://cache.googlevideo.com/get_video?video_id=SFf6n8QwOJ8″

    What is wrong with my comprehension ?

    Thinks by advance,
    Laurent

  7. Hi peterd,

    I am trying to do karaoke recording with flex and streaming server.
    When souce video from server starts playing, I will have to start recording users’ vocal with another netstream.

    Source video is just displaying lyrics to users.

    Currently, there is no checking code for if the souce video really starts playing, so I will have audio/video un-sync problem, especially when they have buffering time.

    So, I am thinking to put embeded cue-points in source flv videos at the very first frame, and wait for that cue-point event, and when that event occurs, just start recording. Also, put ending cue-point at the end of source flvs and check that end event and stop recording. Do you think that would be good solution for video-audio sync problem? Also, let me know how to differentiate those two cue-points in my onCuePoint event handler.

    Thanks in advance.
    Kevin

  8. Hi
    I wanted to know how to put a progress bar on the video that is being played. This tutorial helped.

    Thanks

  9. Hi,

    you have a great collection of flex examples here that helped a lot. But with this example, I found kind of an issue: if you declare the cuepointmanager class via actionscript, it doesn’t work. Do you know a workaround?

  10. Hello,

    How about clicking on the ActionScript cue points in the way of clicking the embedded cue points? Also why does a cue points show in the grid again when you click on such. Can you please show us some examples about this.

    Thank you!

  11. Hi,

    How to create a karaoke player that displays lyrics and highlights the articulated word? Also, how can I multiplex it with a background score?

Comments are closed.