Full code after the jump.

Also, we tweak the slider control (or more accurately HSlider) and prevent users from clicking on the [...]]]> In yet *another* post about the VideoDisplay control, this time we look at formatting playback times using the DateFormatter class/tag, creating a basic scrubber using an HSlider control, and applying a mildly annoying Zoom effect to the video.

Also, we tweak the slider control (or more accurately HSlider) and prevent users from clicking on the slider track (thanks to the allowTrackClick property, we set the liveDragging property to false to make sure we arent needlessly seeking around the video every time the slider thumb moves, and finally we invert the thumb arrow for no other reason than I didn’t know you could do that so easily.

Oh, and I also created a faux looping video by using the autoRewind property, and calling the play() method in the rewind event handler.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function formatTime(item:Date):String {
                return dateFormatter.format(item);
            }

            private function videoDisplay_playheadUpdate():void {
                /* If playhead time is 0, set to 100ms so the DateFormatter doesnt return an empty string. */
                var pT:Number = videoDisplay.playheadTime || 0.1;
                var tT:Number = videoDisplay.totalTime;

                /* Convert playheadTime and totalTime from seconds to milliseconds and create new Date objects. */
                var pTimeMS:Date = new Date(pT * 1000);
                var tTimeMS:Date = new Date(tT * 1000);

                timeLabel.text = formatTime(pTimeMS) + " / " + formatTime(tTimeMS);
            }

            private function slider_thumbPress():void {
                videoDisplay.pause();
            }

            private function slider_thumbRelease():void {
                videoDisplay.playheadTime = slider.value;
                videoDisplay.play();
            }

            private function videoDisplay_ready():void {
                videoDisplay.visible = true;
                controlBar.visible = true;
            }
        ]]>
    </mx:Script>

    <!-- Only show minutes and seconds. -->
    <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />

    <mx:Zoom id="zoom" />

    <mx:Panel title="{videoDisplay.source.split('/').pop()} ({videoDisplay.state})">
        <mx:VideoDisplay id="videoDisplay" visible="false" showEffect="{zoom}"
            playheadUpdate="videoDisplay_playheadUpdate()"
            ready="videoDisplay_ready()"
            rewind="videoDisplay.play()"
            source="http://www.helpexamples.com/flash/video/cuepoints.flv" />

        <mx:ControlBar id="controlBar" visible="false">
            <mx:HSlider id="slider" width="100%"
                allowTrackClick="false"
                invertThumbDirection="true"
                liveDragging="false"
                maximum="{videoDisplay.totalTime}"
                minimum="0"
                thumbPress="slider_thumbPress()"
                thumbRelease="slider_thumbRelease()"
                tickInterval="1"
                value="{videoDisplay.playheadTime}" />
            <mx:Label id="timeLabel" textAlign="right" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source enabled in the following example.

 

Full code after the [...]]]> A simple example of creating and using ActionScript cue points with the VideoDisplay control. The example uses a VideoDisplay control to display the progressively downloaded video, a ProgressBar to display the amount of video that has played back, and two DataGrid controls to show ActionScript cue points and embedded cue points.

Full code after the jump.

The following example creates a series of ActionScript cue points using the <mx:Array> tag and adds them to the VideoDisplay control by setting its cuePoints property. It also demonstrates how you can use a ProgressBar control to display the video playback status using the playheadUpdate event and the ProgressBar control’s label property:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

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

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

            private function onCuePoint(evt:CuePointEvent):void {
                var cuePointObject:Object = {name:evt.cuePointName, time:evt.cuePointTime, type:evt.cuePointType};
                if (evt.cuePointType != "actionscript") {
                    embeddedCuePoints.addItem(cuePointObject);
                }
            }
        ]]>
    </mx:Script>

    <mx:Array id="cuePointArr">
        <mx:Object name="one" time="1" type="actionscript" />
        <mx:Object name="two" time="2" type="actionscript" />
    </mx:Array>

    <mx:VideoDisplay id="videoDisplay" cuePointManagerClass="mx.controls.videoClasses.CuePointManager" cuePoints="{cuePointArr}" cuePoint="onCuePoint(event)" source="http://www.helpexamples.com/flash/video/cuepoints.flv" playheadUpdate="progressBar.setProgress(videoDisplay.playheadTime, videoDisplay.totalTime);" />
    <mx:ProgressBar id="progressBar" mode="manual" width="{videoDisplay.width}" minimum="0" maximum="{videoDisplay.totalTime}" label="{videoDisplay.state} %3%%" />

    <mx:HBox>
        <mx:Panel title="ActionScript cue points:">
            <mx:DataGrid id="actionScriptCuePointGrid" dataProvider="{videoDisplay.cuePoints}">
                <mx:columns>
                    <mx:DataGridColumn dataField="name" headerText="Name:" />
                    <mx:DataGridColumn dataField="time" headerText="Time:" />
                    <mx:DataGridColumn dataField="type" headerText="Type:" />
                </mx:columns>
            </mx:DataGrid>
        </mx:Panel>

        <mx:Panel title="Embedded cue points:">
            <mx:DataGrid id="embeddedCuePointGrid" dataProvider="{embeddedCuePoints}" itemClick="videoDisplay.playheadTime = event.currentTarget.selectedItem.time;">
                <mx:columns>
                    <mx:DataGridColumn dataField="name" headerText="Name:" />
                    <mx:DataGridColumn dataField="time" headerText="Time:" />
                    <mx:DataGridColumn dataField="type" headerText="Type:" />
                </mx:columns>
            </mx:DataGrid>
        </mx:Panel>
    </mx:HBox>

</mx:Application>

If you prefer to define the cue point array in ActionScript rather than MXML, you could use this snippet instead:

[Bindable]
private var cuePointArr:Array = [{name:"one", time:1, type:"actionscript"}, {name:"two", time:2, type:"actionscript"}];

Or…

[Bindable]
private var cuePointArr:Array;

private function initCuePoints():void {
    cuePointArr = new Array();
    cuePointArr.push({name:"one", time:1, type:"actionscript"});
    cuePointArr.push({name:"two", time:2, type:"actionscript"});
    videoDisplay.cuePoints = cuePointArr;
}

You can also define the ActionScript cue points directly within the VideoDisplay MXML tags, like so:

<mx:VideoDisplay id="videoDisplay" cuePointManagerClass="mx.controls.videoClasses.CuePointManager" cuePoint="onCuePoint(event)" source="http://www.helpexamples.com/flash/video/cuepoints.flv" playheadUpdate="progressBar.setProgress(videoDisplay.playheadTime, videoDisplay.totalTime);">
    <mx:cuePoints>
        <mx:Object name="one" time="1" type="actionscript" />
        <mx:Object name="two" time="2" type="actionscript" />
    </mx:cuePoints>
</mx:VideoDisplay>