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

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

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

Demo | View Source

Download: main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.CuePointEvent;

[Bindable]
private var embeddedCuePoints:ArrayCollection = new ArrayCollection();

private function onCuePoint(evt:CuePointEvent):void {
var cuePointObject:Object = {name:evt.cuePointName, time:evt.cuePointTime, type:evt.cuePointType};
if (evt.cuePointType != "actionscript") {
embeddedCuePoints.addItem(cuePointObject);
}
}
]]>
</mx:Script>

<mx:Array id="cuePointArr">
<mx:Object name="one" time="1" type="actionscript" />
<mx:Object name="two" time="2" type="actionscript" />
</mx:Array>

<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);" />
<mx:ProgressBar id="progressBar" mode="manual" width="{videoDisplay.width}" minimum="0" maximum="{videoDisplay.totalTime}" label="{videoDisplay.state} %3%%" />

<mx:HBox>
<mx:Panel title="ActionScript cue points:">
<mx:DataGrid id="actionScriptCuePointGrid" dataProvider="{videoDisplay.cuePoints}">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name:" />
<mx:DataGridColumn dataField="time" headerText="Time:" />
<mx:DataGridColumn dataField="type" headerText="Type:" />
</mx:columns>
</mx:DataGrid>
</mx:Panel>

<mx:Panel title="Embedded cue points:">
<mx:DataGrid id="embeddedCuePointGrid" dataProvider="{embeddedCuePoints}" itemClick="videoDisplay.playheadTime = event.currentTarget.selectedItem.time;">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name:" />
<mx:DataGridColumn dataField="time" headerText="Time:" />
<mx:DataGridColumn dataField="type" headerText="Type:" />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:HBox>

</mx:Application>