Flex的VideoDisplay基本使用方法的例子

By Minidxer | March 23, 2008

我花了几天的时间尝试了VideoDisplay的用法，做了下面这个简单的例子来帮助自己理解在读取Flash Video (FLV)时的各种事件。

接下来的例子就是创建了一个VideoDisplay控件并且将其事件类型，video状态，播放时间以及FLV的全部时间等调试信息显示在DataGrid中。

下面是完整代码：


Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white" creationComplete="init();">
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.             import mx.collections.ArrayCollection;
  7.             import mx.events.CuePointEvent;
  8.             import mx.events.VideoEvent;
  9.  
  10.             [Bindable]
  11.             private var arrColl:ArrayCollection;
  12.  
  13.             [Bindable]
  14.             private var FLV_URL:String = "http://blog.minidx.com/ext/getting-started-with-the-videodisplay-control/clouds.flv";
  15.  
  16.             /**
  17.              * Initialize the ArrayCollection object.
  18.              */
  19.             private function init():void {
  20.                 arrColl = new ArrayCollection();
  21.             } 
  22.  
  23.             private function doVideoEvent(evt:VideoEvent):void {
  24.                 doAddItem({type:evt.type});
  25.             } 
  26.  
  27.             private function doCuePointEvent(evt:CuePointEvent):void {
  28.                 doAddItem({type:evt.type});
  29.             } 
  30.  
  31.             private function doProgressEvent(evt:ProgressEvent):void {
  32.                 doAddItem({type:evt.type});
  33.             } 
  34.  
  35.             /**
  36.              * Add the item to the ArrayCollection instance, revalidate the DataGrid control, and scroll to the last item in the DataGrid.
  37.              */
  38.             private function doAddItem(obj:Object):void {
  39.                 arrColl.addItem({type:obj.type, state:videoDisplay.state, playheadTime:videoDisplay.playheadTime, totalTime:videoDisplay.totalTime});
  40.                 dataGrid.validateNow();
  41.                 dataGrid.selectedIndex = arrColl.length;
  42.                 dataGrid.scrollToIndex(arrColl.length);
  43.             }
  44.         ]]>
  45.     </mx:Script>
  46.  
  47.     <mx:VideoDisplay id="videoDisplay" source="{FLV_URL}" autoPlay="false" autoRewind="false"
  48.             ready="doVideoEvent(event);"
  49.             rewind="doVideoEvent(event);"
  50.             playheadUpdate="doVideoEvent(event);"
  51.             close="doVideoEvent(event);"
  52.             complete="doVideoEvent(event);"
  53.             progress="doProgressEvent(event);" />
  54.  
  55.     <mx:HBox>
  56.         <mx:Button label="play()" click="videoDisplay.play();" />
  57.         <mx:Button label="pause()" click="videoDisplay.pause();" />
  58.         <mx:Button label="stop()" click="videoDisplay.stop();" />
  59.     </mx:HBox>
  60.  
  61.     <mx:DataGrid id="dataGrid" dataProvider="{arrColl}" width="320" rowCount="5">
  62.         <mx:columns>
  63.             <mx:DataGridColumn id="typeCol" dataField="type" headerText="Evt. type" />
  64.             <mx:DataGridColumn id="stateCol" dataField="state" />
  65.             <mx:DataGridColumn id="playheadTimeCol" dataField="playheadTime" textAlign="right" />
  66.             <mx:DataGridColumn id="totalTimeCol" dataField="totalTime" textAlign="right" />
  67.         </mx:columns>
  68.     </mx:DataGrid>
  69.  
  70. </mx:Application>
下面是Demo（可以右键或点击这里察看源代码）：

原文作者：Peter deHaan 翻译：minidxer

Topics: Flex | 3 Comments » | 518 views Tags: , , , , ,

Related Post

3 comments | Add One

Trackbacks

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

赞助商链接

Categories

Archives

Blogroll