Search Flex Components Free

Custom Search

January 14, 2008

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.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="" layout="horizontal"
verticalAlign="middle" backgroundColor="white">
<mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import;
[Bindable] private var arrColl:ArrayCollection = new ArrayCollection(); private const
VIDEO_URL:String = "";
private function videoDisplay_stateChange(evt:VideoEvent):void
/* videoDisplay.state == evt.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;; }
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: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" />

Related Flex Tutorials