23
Jul
07

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

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>

4 Responses to “Listening for a Flash Video's cue points using the VideoDisplay control”


  1. 1 peterd Jul 23rd, 2007 at 4:55 pm

    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. 2 Skye Aug 6th, 2007 at 4:50 pm

    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. 3 Iver Davidson Jun 26th, 2009 at 2:41 pm

    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. 4 Peter deHaan Jun 28th, 2009 at 10:27 pm

    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

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".




July 2007
M T W T F S S
    Aug »
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

Badge Farm

  • Powered by Redoable 1.2
  • Cornify
  • Feeds burnt by Feedburner
  • Feed