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

By Minidxer | January 24, 2009

接下来的例子演示了Flex中如何监测stateChange事件，将VideoDisplay中视频当前ProgressBar中状态显示在List中。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="horizontal"
  4.         verticalAlign="middle"
  5.         backgroundColor="white" viewSourceURL="srcview/index.html">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             import mx.collections.ArrayCollection;
  10.             import mx.events.VideoEvent;
  11.  
  12.             [Bindable]
  13.             private var arrColl:ArrayCollection = new ArrayCollection();
  14.  
  15.             private const VIDEO_URL:String = "http://blog.minidx.com/ext/water.flv";
  16.  
  17.             private function videoDisplay_stateChange(evt:VideoEvent):void {
  18.                 /* videoDisplay.state == evt.state */
  19.                 arrColl.addItem({label:videoDisplay.state});
  20.                 progressBar.label = evt.state;
  21.             }
  22.  
  23.             private function button_click(evt:MouseEvent):void {
  24.                 /* Reset ArrayCollection object. */
  25.                 arrColl = new ArrayCollection();
  26.                 /* Set the Canvas container to visible. */
  27.                 canvas.visible = true;
  28.                 /* If video is currently playing, stop playback. */
  29.                 if (videoDisplay.playing) {
  30.                     videoDisplay.stop();
  31.                 }
  32.                 /* Set VideoDisplay control's source property and start
  33.                    video playback. */
  34.                 videoDisplay.source = VIDEO_URL;
  35.                 videoDisplay.play();
  36.             }
  37.  
  38.             private function videoDisplay_playheadUpdate(evt:VideoEvent):void {
  39.                 progressBar.setProgress(evt.playheadTime, videoDisplay.totalTime);
  40.             }
  41.         ]]>
  42.     </mx:Script>
  43.  
  44.     <mx:ApplicationControlBar dock="true">
  45.         <mx:Button id="button"
  46.                 label="load movie"
  47.                 click="button_click(event);" />
  48.     </mx:ApplicationControlBar>
  49.  
  50.     <mx:Canvas id="canvas" visible="false">
  51.         <mx:VideoDisplay id="videoDisplay"
  52.                 playheadUpdateInterval="50"
  53.                 stateChange="videoDisplay_stateChange(event);"
  54.                 playheadUpdate="videoDisplay_playheadUpdate(event);" />
  55.  
  56.         <mx:ProgressBar id="progressBar"
  57.                 label=""
  58.                 labelPlacement="center"
  59.                 mode="manual"
  60.                 bottom="0"
  61.                 horizontalCenter="0" />
  62.     </mx:Canvas>
  63.  
  64.     <mx:List id="list"
  65.             dataProvider="{arrColl}"
  66.             width="100" />
  67.  
  68. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: VideoDisplay | No Comments » | Tags: , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll