Jun 29

Flex中如何利用cuePointManager属性和addCuePoint事件往FLV中添加ActionScript暗点的例子

FlexAdd comments

在前面的Flex的VideoDisplay控件中如何创建和使用ActionScript暗点的例子中，我们稍微了解了一点关于CuePointManager的用法，接下来的例子演示了Flex中如何利用cuePointManager属性和addCuePoint事件，往FLV中添加ActionScript暗点。

由于width比较大，所以Demo放在单独的页面中：

Search-256x256 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="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             [Bindable]
  10.             private var FLV_URL:String = "http://blog.minidx.com/ext/cuepoints.flv";
  11.  
  12.             private function videoDisplay_addCuePoint(evt:MouseEvent):void {
  13.                 var cpTime:String = videoDisplay.playheadTime.toFixed(3);
  14.                 var cpName:String = 'cp' + (parseFloat(cpTime) * 1000);
  15.  
  16.                 videoDisplay.cuePointManager.addCuePoint({name:cpName, time:cpTime});
  17.  
  18.                 lbl.text = videoDisplay.cuePointManager.getCuePoints().length + " cue point(s)";
  19.             }
  20.  
  21.             private function toggleVideoPlayback():void {
  22.                 (videoDisplay.playing) ? videoDisplay.pause() : videoDisplay.play();
  23.             }
  24.  
  25.             private function updateProgressBar():void {
  26.                 progressBar.setProgress(videoDisplay.playheadTime, videoDisplay.totalTime)
  27.             }
  28.         ]]>
  29.     </mx:Script>
  30.  
  31.     <mx:Label text="Click video to begin playback" />
  32.  
  33.     <mx:Panel title="{FLV_URL.split('/').pop()} ({videoDisplay.totalTime.toFixed(2)})" id="panel" visible="false">
  34.         <mx:HBox>
  35.             <mx:VBox>
  36.                 <mx:VideoDisplay id="videoDisplay" source="{FLV_URL}" autoPlay="false" ready="panel.visible = true" cuePointManagerClass="mx.controls.videoClasses.CuePointManager" click="toggleVideoPlayback()" playheadUpdate="updateProgressBar()" />
  37.                 <mx:ProgressBar id="progressBar" width="{videoDisplay.width}" mode="manual" label="{videoDisplay.playheadTime.toFixed(2)} / -{(videoDisplay.totalTime - videoDisplay.playheadTime).toFixed(2)} (%3%%)" />
  38.             </mx:VBox>
  39.             <mx:VBox>
  40.                 <mx:DataGrid id="dataGrid" width="{videoDisplay.width}" height="{videoDisplay.height}" dataProvider="{videoDisplay.cuePoints}" change="videoDisplay.playheadTime = event.currentTarget.selectedItem.time" />
  41.                 <mx:HBox width="100%">
  42.                     <mx:Button label="add cue point" click="videoDisplay_addCuePoint(event)" />
  43.                     <mx:Label id="lbl" width="100%" textAlign="right" />
  44.                 </mx:HBox>
  45.             </mx:VBox>
  46.         </mx:HBox>
  47.     </mx:Panel>
  48.  
  49. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , , , ,

Related Post

2 Responses to “Flex中如何利用cuePointManager属性和addCuePoint事件往FLV中添加ActionScript暗点的例子”

Trackbacks

Leave a Reply