Jun 30

Flex中利用VideoDisplay和HSlider控件对FLV进行“清扫”的例子

FlexAdd comments

在前面的Flex中如何利用cuePointManager属性和addCuePoint事件往FLV中添加ActionScript暗点的例子中，我们了解了Flex中如何利用cuePointManager属性和addCuePoint事件，往FLV中添加ActionScript暗点。接下来的例子则演示了Flex中如何利用VideoDisplay和HSlider控件，给FLV添加一个“清道夫”。

由于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" layout="vertical" verticalAlign="top" backgroundColor="white" viewSourceURL="srcview/index.html">
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.             private function formatTime(item:Date):String {
  7.                 return dateFormatter.format(item);
  8.             }
  9.  
  10.             private function videoDisplay_playheadUpdate():void {
  11.                 /* If playhead time is 0, set to 100ms so the DateFormatter doesnt return an empty string. */
  12.                 var pT:Number = videoDisplay.playheadTime || 0.1;
  13.                 var tT:Number = videoDisplay.totalTime;
  14.  
  15.                 /* Convert playheadTime and totalTime from seconds to milliseconds and create new Date objects. */
  16.                 var pTimeMS:Date = new Date(pT * 1000);
  17.                 var tTimeMS:Date = new Date(tT * 1000);
  18.  
  19.                 timeLabel.text = formatTime(pTimeMS) + " / " + formatTime(tTimeMS);
  20.             }
  21.  
  22.             private function slider_thumbPress():void {
  23.                 videoDisplay.pause();
  24.             }
  25.  
  26.             private function slider_thumbRelease():void {
  27.                 videoDisplay.playheadTime = slider.value;
  28.                 videoDisplay.play();
  29.             }
  30.  
  31.             private function videoDisplay_ready():void {
  32.                 videoDisplay.visible = true;
  33.                 controlBar.visible = true;
  34.             }
  35.         ]]>
  36.     </mx:Script>
  37.  
  38.     <!-- Only show minutes and seconds. -->
  39.     <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />
  40.  
  41.     <mx:Zoom id="zoom" />
  42.  
  43.     <mx:Panel title="{videoDisplay.source.split('/').pop()} ({videoDisplay.state})">
  44.         <mx:VideoDisplay id="videoDisplay" visible="false" showEffect="{zoom}"
  45.             playheadUpdate="videoDisplay_playheadUpdate()"
  46.             ready="videoDisplay_ready()"
  47.             rewind="videoDisplay.play()"
  48.             source="http://blog.minidx.com/ext/cuepoints.flv" />
  49.  
  50.         <mx:ControlBar id="controlBar" visible="false">
  51.             <mx:HSlider id="slider" width="100%"
  52.                 allowTrackClick="false"
  53.                 invertThumbDirection="true"
  54.                 liveDragging="false"
  55.                 maximum="{videoDisplay.totalTime}"
  56.                 minimum="0"
  57.                 thumbPress="slider_thumbPress()"
  58.                 thumbRelease="slider_thumbRelease()"
  59.                 tickInterval="1"
  60.                 value="{videoDisplay.playheadTime}" />
  61.             <mx:Label id="timeLabel" textAlign="right" />
  62.         </mx:ControlBar>
  63.     </mx:Panel>
  64.  
  65. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , , ,

Related Post

Leave a Reply