Flex中如何给VideoDisplay添加一个基本的播放/暂停按钮的例子

By Minidxer | July 12, 2008

在前面的Flex的VideoDisplay基本使用方法的例子中我们学习了VideoDisplay的一些基本用法，不过很多时候，我们看到的播放器，开始/暂停控制按钮都是直接在播放画面中的，鼠标移到画面上的时候显示，移出之后隐藏。接下来的例子就演示了Flex中如何给VideoDisplay添加一个基本的播放/暂停按钮。

让我们先来看一下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">
  3.  
  4.     <mx:Style>
  5.         @font-face {
  6.             src:url("assets/arial.ttf");
  7.             font-family: Arial;
  8.         }
  9.  
  10.         .timeStyle {
  11.             color: #FFFFFF;
  12.             font-family: Arial;
  13.             font-size: 12;
  14.         }
  15.  
  16.         .playPauseStyle {
  17.             /* play button skins */
  18.             skin: Embed('assets/control_play.png');
  19.             downSkin: Embed('assets/control_play_blue.png');
  20.  
  21.             /* pause button skins */
  22.             selectedUpSkin: Embed('assets/control_pause.png');
  23.             selectedOverSkin: Embed('assets/control_pause.png');
  24.             selectedDownSkin: Embed('assets/control_pause_blue.png');
  25.         }
  26.  
  27.         .stopStyle {
  28.             skin: Embed('assets/control_stop.png');
  29.             downSkin: Embed('assets/control_stop_blue.png');
  30.         }
  31.  
  32.         .controllerStyle {
  33.             bottom: 5;
  34.             left: 5;
  35.             right: 5;
  36.             paddingBottom: 5;
  37.             paddingLeft: 5;
  38.             paddingRight: 5;
  39.             paddingTop: 5;
  40.             alpha: 0;
  41.             background-color: #000000;
  42.             background-alpha: 0.5;
  43.         }
  44.     </mx:Style>
  45.  
  46.     <mx:Script>
  47.         <![CDATA[
  48.             import mx.events.VideoEvent;
  49.  
  50.             private function showControls():void {
  51.                 fadeIn.play([controls]);
  52.             }
  53.  
  54.             private function hideControls():void {
  55.                 fadeOut.play([controls]);
  56.             }
  57.  
  58.             private function videoDisplay_playheadUpdate(evt:VideoEvent):void {
  59.                 var pTime:Date = new Date(videoDisplay.playheadTime * 1000 || 100);
  60.                 var tTime:Date = new Date(videoDisplay.totalTime * 1000);
  61.                 time.text = dateFormatter.format(pTime) + " / " + dateFormatter.format(tTime);
  62.             }
  63.  
  64.             private function playPauseButton_click(evt:MouseEvent):void {
  65.                 if (videoDisplay.playing) {
  66.                     videoDisplay.pause();
  67.                 } else {
  68.                     videoDisplay.play();
  69.                 }
  70.             }
  71.  
  72.             private function stopButton_click(evt:MouseEvent):void {
  73.                 videoDisplay.stop();
  74.             }
  75.         ]]>
  76.     </mx:Script>
  77.  
  78.     <mx:Fade id="fadeIn" alphaFrom="0.0" alphaTo="1.0" />
  79.     <mx:Fade id="fadeOut" alphaFrom="1.0" alphaTo="0.0" />
  80.  
  81.     <mx:DateFormatter id="dateFormatter" formatString="NN:SS" />
  82.  
  83.     <mx:Label text="Mouse over the VideoDisplay control below to show control buttons." />
  84.     <mx:Canvas rollOver="showControls()" rollOut="hideControls()">
  85.         <mx:VideoDisplay id="videoDisplay" source="http://blog.minidx.com/ext/caption_video.flv" autoPlay="false" playheadUpdate="videoDisplay_playheadUpdate(event)" />
  86.         <mx:HBox id="controls" styleName="controllerStyle" alpha="0.0">
  87.             <mx:Button id="playPauseButton" styleName="playPauseStyle" toggle="true" selected="{videoDisplay.playing}" click="playPauseButton_click(event)" />
  88.             <mx:Button id="stopButton" styleName="stopStyle" click="stopButton_click(event)" />
  89.             <mx:Spacer width="100%" />
  90.             <mx:Label id="time" styleName="timeStyle" />
  91.         </mx:HBox>
  92.     </mx:Canvas>
  93.  
  94. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads