Flex2款简单FLV播放器--很经典

 网上找到2款比较简单的VideoDisplay实例应用,很精简但很经典。

 第一款:普通播放器,包括Play,Stop,Pause,进程拖拽显示,声音调整,全屏等功能

主要是playheadTime,VideoEvent.PLAYHEAD_UPDATE,volume的应用

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="playinit()" width="500" height="400">  
  3.   
  4.     <mx:Script>  
  5.     <!--[CDATA[  
  6.        import mx.events.SliderEvent;  
  7.        import mx.events.VideoEvent;  
  8.        import flash.display.Stage;  
  9.         
  10.        private var isplaying:Boolean=false;        
  11.        private var video_url:String = "video/happy.flv";        
  12.        private var playPosition:Number;        
  13.        private var soundPosition:Number;  
  14.         
  15.        private function playinit():void{  
  16.         hs.enabled=false;  
  17.        }  
  18.         
  19.        private function flvplay(event:Event):void{  
  20.         flv_video.source=video_url;  
  21.         hs.enabled=true;  
  22.         if(isplaying){  
  23.          flv_video.pause();  
  24.          play_btn.label="播放"  
  25.         }else {  
  26.          flv_video.play();  
  27.          play_btn.label="暂停"  
  28.         }  
  29.         isplaying = !isplaying;   
  30.         flv_video.addEventListener(VideoEvent.PLAYHEAD_UPDATE, progressHandler);          
  31.        }        
  32.        private function progressHandler(event:VideoEvent):void{  
  33.         hs.value=flv_video.playheadTime;  
  34.        }   
  35.             
  36.        private function thumbPress(event:SliderEvent):void{  
  37.         flv_video.pause();  
  38.        }  
  39.        private function thumbChanges(event:SliderEvent):void{  
  40.         if(flv_video.playheadTime == -1){  
  41.       hs.value = 0;  
  42.       return;  
  43.      }  
  44.         playPosition = hs.value;  
  45.        }        
  46.        private function thumbRelease(event:SliderEvent):void{  
  47.         flv_video.playheadTime = playPosition;  
  48.         if(isplaying){  
  49.          flv_video.play();  
  50.         }else{  
  51.          flv_video.pause();  
  52.         }  
  53.        }  
  54.         
  55.        private function sound_thumbChanges(event:SliderEvent):void{  
  56.         soundPosition = hs_sound.value;  
  57.        }           
  58.        private function sound_thumbRelease(event:SliderEvent):void{  
  59.         flv_video.volume = soundPosition;  
  60.        }  
  61.         
  62.        private function formatTimes(value:int):String{  
  63.         var result:String = (value % 60).toString();  
  64.          
  65.           if (result.length == 1){  
  66.               result = Math.floor(value / 60).toString() + ":0" + result;  
  67.           } else {  
  68.               result = Math.floor(value / 60).toString() + ":" + result;  
  69.           }  
  70.           return result;  
  71.        }  
  72.         
  73.             private function display():void   
  74.             {     
  75.                 if(fs.selected)     
  76.                 {     
  77.                     stage.displayState="fullScreen";  
  78.                     application.width="100%";  
  79.                     application.height="100%";  
  80.                 }  
  81.                 else{     
  82.                     stage.displayState="normal";     
  83.                 }     
  84.             }   
  85.               
  86.     ]]-->  
  87.     </mx:Script>  
  88. <mx:VideoDisplay   id="flv_video" x="0" width="100%" height="100%" y="0" autoPlay="true" autoRewind="true"/>  
  89. <mx:ApplicationControlBar height="20" width="100%" bottom="67" x="0" horizontalAlign="center">  
  90.    <mx:HSlider id="hs" fillColors="#000099,, #0000ff, #ffffff, #eeeeee" showTrackHighlight="true" minimum="0" maximum="{flv_video.totalTime}" thumbPress="thumbPress(event)" thumbRelease="thumbRelease(event)" change="thumbChanges(event)" width="90%" horizontalCenter="0"/>  
  91. </mx:ApplicationControlBar>  
  92. <mx:ApplicationControlBar width="100%" height="49" horizontalAlign="center" x="0" bottom="10">  
  93.    <mx:ApplicationControlBar width="123" cornerRadius="15">  
  94.     <mx:Button id="play_btn" click="flvplay(event)" label="播放" cornerRadius="13"/>  
  95.     <mx:Button id="stop_btn" label="停止" cornerRadius="13" click="flv_video.stop();play_btn.label='播放'; hs.enabled=false;" />  
  96.    </mx:ApplicationControlBar>  
  97.    <mx:ApplicationControlBar width="94" cornerRadius="15">  
  98.     <mx:Label id="playtime" text="{formatTimes(flv_video.playheadTime)} : {formatTimes(flv_video.totalTime)}" color="#ffffff" width="77"/>  
  99.    </mx:ApplicationControlBar>  
  100.    <mx:ApplicationControlBar cornerRadius="15" width="100">  
  101.     <mx:HSlider id="hs_sound" width="82" minimum="0" maximum="1" thumbRelease="sound_thumbRelease(event)" change="sound_thumbChanges(event)" value="{flv_video.volume}" />  
  102.    </mx:ApplicationControlBar>  
  103.    <mx:ApplicationControlBar color="#EC968F">  
  104.     <mx:CheckBox label="全屏" id="fs" change="display();"/>  
  105.    </mx:ApplicationControlBar>  
  106. </mx:ApplicationControlBar>   
  107. </mx:Application>  
 

第二款:外加提示点播放器

主要是cuePointManagerClass的应用。

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#FFFFFF"  
  3.         creationComplete="srv.send()"  
  4.         currentState="{vd.playing?'videoPlaying':''}">  
  5.         <mx:states>  
  6.                 <mx:State name="videoPlaying">  
  7.                         <mx:SetProperty target="{panel}" name="width" value="652"/>  
  8.                 </mx:State>  
  9.         </mx:states>  
  10.         <mx:Script>  
  11.                 <!--[CDATA[  
  12.                         import mx.collections.ArrayCollection;  
  13.                         import mx.events.CuePointEvent;  
  14.                           
  15.                         private function cuePointHandler(event:CuePointEvent):void  
  16.                         {  
  17.                                 caption.text = event.cuePointName;  
  18.                         }  
  19.                           
  20.                         private function changeHandler():void  
  21.                         {  
  22.                                 vd.cuePointManager.removeAllCuePoints()  
  23.                                 vd.cuePoints = ArrayCollection(list.selectedItem.cuePoint).source;  
  24.                         }  
  25.                           
  26.                 ]]-->  
  27.         </mx:Script>  
  28.           
  29.         <mx:HTTPService id="srv" url="question.xml"/>  
  30.           
  31.         <mx:Panel title="Frequently Asked Questions" layout="absolute" x="20" y="20" width="320" height="282" id="panel" horizontalScrollPolicy="off"  
  32.                 resizeEffect="Resize">  
  33.                   
  34.                 <mx:List id="list" dataProvider="{srv.lastResult.questions.question}" labelField="text"  
  35.                         change="changeHandler()" left="0" top="0" bottom="0" width="310"/>  
  36.                 <mx:VideoDisplay id="vd" source="{list.selectedItem.video}" height="240" autoPlay="true"   
  37.                         cuePointManagerClass="mx.controls.videoClasses.CuePointManager" cuePoint="cuePointHandler(event)"   
  38.                         top="1" left="311" width="320"/>  
  39.                 <mx:Button label="Stop" click="vd.stop()" x="566" y="8"/>  
  40.           
  41.                 <mx:Text id="caption" x="320" y="200" color="#FFFFFF" fontWeight="bold" height="40" width="320"/>  
  42.         </mx:Panel>  
  43.           
  44. </mx:Application>  
 

question.xml

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <questions>  
  3.         <question>  
  4.                 <text>Who can apply?</text>  
  5.                 <video>video/happy.flv</video>  
  6.                 <cuePoint time="1" name="We accept students from a variety of programs"/>  
  7.                 <cuePoint time="6" name="If your institution is not accredited"/>  
  8.                 <cuePoint time="8.5" name="Contact department before applying"/>  
  9.         </question>  
  10.         <question>  
  11.                 <text>How are applications evaluated?</text>  
  12.                 <video>video/happy1.flv</video>  
  13.                 <cuePoint time="1" name="We take a number of factors into account"/>  
  14.                 <cuePoint time="6" name="GPA below 3.0?"/>  
  15.                 <cuePoint time="8.5" name="Contact department before applying"/>  
  16.         </question>  
  17.         <question>  
  18.                 <text>When should I provide financial information?</text>  
  19.                 <video>video/happy2.flv</video>  
  20.                 <cuePoint time="1" name="Financial information is not required until you have been accepted"/>  
  21.                 <cuePoint time="6" name="Graduate school will send list of required documents"/>  
  22.                 <cuePoint time="11" name="No need to send financial information until you have been accepted "/>  
  23.         </question>  
  24. </questions>  
 


posted on 2010-05-13 15:26  念时  阅读(438)  评论(0编辑  收藏  举报

细节决定成败!态度决定一切!