Determining a VideoDisplay control’s current playback state using the state property and stateChange event

The following example shows how you can listen for stateChange events on a Flex VideoDisplay control to display the video’s current state in a ProgressBar control, List control, or just perform specific actions if a certain state is entered. It also shows how you can use a ProgressBar control to display the amount of video that has already been played, and how much is still remaining by listening for the playheadUpdate event and passing the VideoEvent class’s playheadTime property, and VideoDisplay class’s totalTime property to the ProgressBar class’s setProgress() method.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/01/determining-a-videodisplay-controls-current-playback-state-using-the-state-property-and-statechange-event/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="horizontal"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.VideoEvent;

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

            private const VIDEO_URL:String = "http://www.helpexamples.com/flash/video/water.flv";

            private function videoDisplay_stateChange(evt:VideoEvent):void {
                /* videoDisplay.state == evt.state */
                arrColl.addItem({label:videoDisplay.state});
                progressBar.label = evt.state;
            }

            private function button_click(evt:MouseEvent):void {
                /* Reset ArrayCollection object. */
                arrColl = new ArrayCollection();
                /* Set the Canvas container to visible. */
                canvas.visible = true;
                /* If video is currently playing, stop playback. */
                if (videoDisplay.playing) {
                    videoDisplay.stop();
                }
                /* Set VideoDisplay control's source property and start
                   video playback. */
                videoDisplay.source = VIDEO_URL;
                videoDisplay.play();
            }

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

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="button"
                label="load movie"
                click="button_click(event);" />
    </mx:ApplicationControlBar>

    <mx:Canvas id="canvas" visible="false">
        <mx:VideoDisplay id="videoDisplay"
                playheadUpdateInterval="50"
                stateChange="videoDisplay_stateChange(event);"
                playheadUpdate="videoDisplay_playheadUpdate(event);" />

        <mx:ProgressBar id="progressBar"
                label=""
                labelPlacement="center"
                mode="manual"
                bottom="0"
                horizontalCenter="0" />
    </mx:Canvas>

    <mx:List id="list"
            dataProvider="{arrColl}"
            width="100" />

</mx:Application>

View source is enabled in the following example.