Here’s a simple example that listens for the cuePoint event on a VideoDisplay control and updates a DataGrid control whenever the cue point is encountered.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white" >
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.CuePointEvent;

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

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

            private function doCuePoint(evt:CuePointEvent):void {
                var eType:String = evt.type;
                var cpName:String = evt.cuePointName;
                var cpTime:Number = evt.cuePointTime;
                var cpType:String = evt.cuePointType;

                arrColl.addItem({type:eType, cuePointName:cpName, cuePointTime:cpTime, cuePointType:cpType});
            }
        ]]>
    </mx:Script>

    <mx:VideoDisplay id="vid" autoPlay="true" source="{FLV_URL}" cuePoint="doCuePoint(event);" />

    <mx:DataGrid id="dataGrid" dataProvider="{arrColl}" width="400" rowCount="5">
        <mx:columns>
            <mx:DataGridColumn id="typeCol" dataField="type" />
            <mx:DataGridColumn id="cuePointNameCol" dataField="cuePointName" />
            <mx:DataGridColumn id="cuePointTimeCol" dataField="cuePointTime" textAlign="right" />
            <mx:DataGridColumn id="cuePointTypeCol" dataField="cuePointType" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>
 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

6 Responses to Listening for a Flash Video’s cue points using the VideoDisplay control

  1. peterd says:

    Sorry for the lack of formatting, I hope to clean these up in the near future and include the working examples, view-source, and all that “stuff”.

  2. Skye says:

    Peter,

    In another post, I though I solicitation for suggestions for a Syntax Highlighter. I just stumbled upon this:
    http://www.machine501.com/2007/05/29/syntax-highlight-as3/

    (via http://www.tombray.com/?p=31 …. via http://weblogs.macromedia.com/mxna/ )

  3. Iver Davidson says:

    I find a lot of information on how to access the cuepoint name and time and type, but nothing on how to access cuepoint parameters. Does anyone know how to do that using the VideoDisplay component?

    thanks.

  4. Peter deHaan says:

    Iver Davidson,

    Hhmm, can you please file a bug/enhancement request for this at http://bugs.adobe.com/flex .
    I think this should be a little easier, and the CuePointEvent should probably include a cuePointProperties object.

    Regardless, here’s a way you can look up the VideoDisplay control’s metadata cuePoints property and compare it to the current cue point object:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
        <mx:Script>
            <![CDATA[
                import mx.utils.ObjectUtil;
                import mx.events.CuePointEvent;
    
                private function vidDisp_cuePoint(evt:CuePointEvent):void {
                    var cuePointObj:Object = getCuePointByName(evt.cuePointName);
                    trace(evt.cuePointName, ObjectUtil.toString(cuePointObj));
                }
    
                private function getCuePointByName(value:String):Object {
                    var obj:Object;
                    var cuePointArr:Array = vidDisp.metadata.cuePoints;
                    var idx:uint;
                    var len:int = cuePointArr.length;
                    for (idx = 0; idx < len; idx++) {
                        if (cuePointArr[idx].name == value) {
                            return cuePointArr[idx];
                        }
                    }
                    return null;
                }
            ]]>
        </mx:Script>
    
        <mx:VideoDisplay id="vidDisp"
                source="http://helpexamples.com/flash/video/cuepoints.flv"
                cuePoint="vidDisp_cuePoint(event);" />
    
    </mx:Application>
    

    Peter

  5. Rob Dietz says:

    What about doing this in reverse? I’d like to inject cuePoints into the videoDisplay from a numberStepper or other control. This might allow me dynamically set loop points within a video similar to what can be done with Quicktime or other video editing app’s.

    I already have a function to handle the looping: when cuePoint #2 is reached the playHeadTime changes to match cuePoint #1′s time. I am able to set these cuePoints once but cannot move change them and have the videoDisplay update accordingly.

    Thanks for all the great tutorials.

  6. creacog says:

    @Iver, old post I know, but I had to revert using mx:VideoDisplay in my Fx4 project just now.

    You can get mx.events.MetadataEvent.CUE_POINT if you are prepared to go mx_internal…

    Listen for metadataReceived on your mx:VideoDisplay. In that handler add a cuePointListener to VideoDisplay’s internal videoPlayer, thus:

    videoDisplay.mx_internal::videoPlayer.addEventListener(
    MetadataEvent.CUE_POINT, myCuePointHandler );

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree