Adding ActionScript cue points using the CuePointManager

I was just playing around with the VideoDisplay.cuePointManager property, and made a pretty crude FLV player. The FLV URL is hard-coded, so it really isn’t very useful, but it shows how you can use the cuePointManager property and addCuePoint() method to add ActionScript cue points to an FLV.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/01/adding-actionscript-cue-points-using-the-cuepointmanager/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            [Bindable]
            private var FLV_URL:String = "http://www.helpexamples.com/flash/video/cuepoints.flv";

            private function videoDisplay_addCuePoint(evt:MouseEvent):void {
                var cpTime:String = videoDisplay.playheadTime.toFixed(3);
                var cpName:String = 'cp' + (parseFloat(cpTime) * 1000);

                videoDisplay.cuePointManager.addCuePoint({name:cpName, time:cpTime});

                lbl.text = videoDisplay.cuePointManager.getCuePoints().length + " cue point(s)";
            }

            private function toggleVideoPlayback():void {
                (videoDisplay.playing) ? videoDisplay.pause() : videoDisplay.play();
            }

            private function updateProgressBar():void {
                progressBar.setProgress(videoDisplay.playheadTime, videoDisplay.totalTime)
            }
        ]]>
    </mx:Script>

    <mx:Label text="Click video to begin playback" />

    <mx:Panel title="{FLV_URL.split('/').pop()} ({videoDisplay.totalTime.toFixed(2)})" id="panel" visible="false">
        <mx:HBox>
            <mx:VBox>
                <mx:VideoDisplay id="videoDisplay" source="{FLV_URL}" autoPlay="false" ready="panel.visible = true" cuePointManagerClass="mx.controls.videoClasses.CuePointManager" click="toggleVideoPlayback()" playheadUpdate="updateProgressBar()" />
                <mx:ProgressBar id="progressBar" width="{videoDisplay.width}" mode="manual" label="{videoDisplay.playheadTime.toFixed(2)} / -{(videoDisplay.totalTime - videoDisplay.playheadTime).toFixed(2)} (%3%%)" />
            </mx:VBox>
            <mx:VBox>
                <mx:DataGrid id="dataGrid" width="{videoDisplay.width}" height="{videoDisplay.height}" dataProvider="{videoDisplay.cuePoints}" change="videoDisplay.playheadTime = event.currentTarget.selectedItem.time" />
                <mx:HBox width="100%">
                    <mx:Button label="add cue point" click="videoDisplay_addCuePoint(event)" />
                    <mx:Label id="lbl" width="100%" textAlign="right" />
                </mx:HBox>
            </mx:VBox>
        </mx:HBox>
    </mx:Panel>

</mx:Application>

6 thoughts on “Adding ActionScript cue points using the CuePointManager

  1. There seems to be a FLEX BUG w dynamic cue points >=10 secs for VideoDisplay objs that were attached (via addChild() to a UIComponent which serves as a “stage”. Adding cue points =>10 secs screws up all cue points.

    ??

  2. Artemis,

    Thanks, I moved it to the SDK/VideoDisplay project/feature so it appears in my queue and I can hopefully look at it tomorrow or over the weekend if I get some time.

    We’re fairly late in the Flex 3 development cycle, so I’m not sure if we can sneak this in before release, but I’ll see what we can do.

    Thanks for the heads up,
    Peter

  3. Peter,
    I have to take you back in time for my question. Way back to Flex 3.x. My project is intended for use in Adobe Connect and it doesn’t support anything newer.

    I may have encountered the same bug that Artemis mentions above. I’m using your code from this tutorial to add cuepoints and my label.text shows correctly that I have added 138 cuepoints.
    However when the video plays I get results for the first 4 cuepoints which take us up to 9.6 seconds. The next cuepoint at 13.6 seconds does not trigger an event. The next cuepoint that does trigger an event is at 91 seconds. At which point 4 cuepoints trigger an event and then no more do for the remaining 6 minutes of the video.

    Thanks,
    Dave

Comments are closed.