Flex的VideoDisplay控件中如何创建和使用ActionScript暗点的例子

接下来的例子中演示了Flex的VideoDisplay控件中如何创建和使用ActionScript暗点。例子中使用VideoDisplay控件显示video下载的进度，两个DataGrid控件显示ActionScript暗点和嵌入暗点。

由于例子中使用了两个Datagrid，在单独页面中察看效果比较不错：

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" layout="vertical" verticalAlign="middle" backgroundColor="white"> 
4.     <mx:Script>
5.         <![CDATA[
6.             import mx.collections.ArrayCollection;
7.             import mx.events.CuePointEvent;
9.             [Bindable]
10.             private var embeddedCuePoints:ArrayCollection = new ArrayCollection();
12.             private function onCuePoint(evt:CuePointEvent):void {
13.                 var cuePointObject:Object = {name:evt.cuePointName, time:evt.cuePointTime, type:evt.cuePointType};
14.                 if (evt.cuePointType != "actionscript") {
15.                     embeddedCuePoints.addItem(cuePointObject);
16.                 }
17.             }
18.         ]]>
19.     </mx:Script> 
21.     <mx:Array id="cuePointArr">
22.         <mx:Object name="one" time="1" type="actionscript" />
23.         <mx:Object name="two" time="2" type="actionscript" />
24.     </mx:Array> 
26.     <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);" />
27.     <mx:ProgressBar id="progressBar" mode="manual" width="{videoDisplay.width}" minimum="0" maximum="{videoDisplay.totalTime}" label="{videoDisplay.state} %3%%" /> 
29.     <mx:HBox>
30.         <mx:Panel title="ActionScript cue points:">
31.             <mx:DataGrid id="actionScriptCuePointGrid" dataProvider="{videoDisplay.cuePoints}">
32.                 <mx:columns>
33.                     <mx:DataGridColumn dataField="name" headerText="Name:" />
34.                     <mx:DataGridColumn dataField="time" headerText="Time:" />
35.                     <mx:DataGridColumn dataField="type" headerText="Type:" />
36.                 </mx:columns>
37.             </mx:DataGrid>
38.         </mx:Panel> 
40.         <mx:Panel title="Embedded cue points:">
41.             <mx:DataGrid id="embeddedCuePointGrid" dataProvider="{embeddedCuePoints}" itemClick="videoDisplay.playheadTime = event.currentTarget.selectedItem.time;">
42.                 <mx:columns>
43.                     <mx:DataGridColumn dataField="name" headerText="Name:" />
44.                     <mx:DataGridColumn dataField="time" headerText="Time:" />
45.                     <mx:DataGridColumn dataField="type" headerText="Type:" />
46.                 </mx:columns>
47.             </mx:DataGrid>
48.         </mx:Panel>
49.     </mx:HBox> 
51. </mx:Application>