Flex中如何监测stateChange事件，将VideoDisplay中视频当前ProgressBar中状态显示在List中...

于 2009-06-08 23:20:00 发布 · 129 阅读

文章标签：

#Flex #EXT #Adobe #XML #Blog

本文介绍了一个使用Flex构建的简易视频播放器应用。该播放器能够加载并播放指定URL的视频文件，同时显示视频状态变化，并提供了进度条更新等功能。通过ArrayCollection记录视频状态的变化历史。

Download: main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
verticalAlign="middle"
backgroundColor="white"viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.VideoEvent;
[Bindable]
private var arrColl:ArrayCollection = new ArrayCollection();
private const VIDEO_URL:String = "http://blog.minidx.com/ext/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:ApplicationControlBardock="true">
<mx:Buttonid="button"
label="load movie"
click="button_click(event);"/>
</mx:ApplicationControlBar>
<mx:Canvasid="canvas" visible="false">
<mx:VideoDisplayid="videoDisplay"
playheadUpdateInterval="50"
stateChange="videoDisplay_stateChange(event);"
playheadUpdate="videoDisplay_playheadUpdate(event);"/>
<mx:ProgressBarid="progressBar"
label=""
labelPlacement="center"
mode="manual"
bottom="0"
horizontalCenter="0"/>
</mx:Canvas>
<mx:Listid="list"
dataProvider="{arrColl}"
width="100"/>
</mx:Application>