Flex Examples

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>