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>  

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="playinit()" width="500" height="400"> <mx:Script> <!--[CDATA[ import mx.events.SliderEvent; import mx.events.VideoEvent; import flash.display.Stage; private var isplaying:Boolean=false; private var video_url:String = "video/happy.flv"; private var playPosition:Number; private var soundPosition:Number; private function playinit():void{ hs.enabled=false; } private function flvplay(event:Event):void{ flv_video.source=video_url; hs.enabled=true; if(isplaying){ flv_video.pause(); play_btn.label="播放" }else { flv_video.play(); play_btn.label="暂停" } isplaying = !isplaying; flv_video.addEventListener(VideoEvent.PLAYHEAD_UPDATE, progressHandler); } private function progressHandler(event:VideoEvent):void{ hs.value=flv_video.playheadTime; } private function thumbPress(event:SliderEvent):void{ flv_video.pause(); } private function thumbChanges(event:SliderEvent):void{ if(flv_video.playheadTime == -1){ hs.value = 0; return; } playPosition = hs.value; } private function thumbRelease(event:SliderEvent):void{ flv_video.playheadTime = playPosition; if(isplaying){ flv_video.play(); }else{ flv_video.pause(); } } private function sound_thumbChanges(event:SliderEvent):void{ soundPosition = hs_sound.value; } private function sound_thumbRelease(event:SliderEvent):void{ flv_video.volume = soundPosition; } private function formatTimes(value:int):String{ var result:String = (value % 60).toString(); if (result.length == 1){ result = Math.floor(value / 60).toString() + ":0" + result; } else { result = Math.floor(value / 60).toString() + ":" + result; } return result; } private function display():void { if(fs.selected) { stage.displayState="fullScreen"; application.width="100%"; application.height="100%"; } else{ stage.displayState="normal"; } } ]]--> </mx:Script> <mx:VideoDisplay id="flv_video" x="0" width="100%" height="100%" y="0" autoPlay="true" autoRewind="true"/> <mx:ApplicationControlBar height="20" width="100%" bottom="67" x="0" horizontalAlign="center"> <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"/> </mx:ApplicationControlBar> <mx:ApplicationControlBar width="100%" height="49" horizontalAlign="center" x="0" bottom="10"> <mx:ApplicationControlBar width="123" cornerRadius="15"> <mx:Button id="play_btn" click="flvplay(event)" label="播放" cornerRadius="13"/> <mx:Button id="stop_btn" label="停止" cornerRadius="13" click="flv_video.stop();play_btn.label='播放';hs.enabled=false;" /> </mx:ApplicationControlBar> <mx:ApplicationControlBar width="94" cornerRadius="15"> <mx:Label id="playtime" text="{formatTimes(flv_video.playheadTime)} : {formatTimes(flv_video.totalTime)}" color="#ffffff" width="77"/> </mx:ApplicationControlBar> <mx:ApplicationControlBar cornerRadius="15" width="100"> <mx:HSlider id="hs_sound" width="82" minimum="0" maximum="1" thumbRelease="sound_thumbRelease(event)" change="sound_thumbChanges(event)" value="{flv_video.volume}" /> </mx:ApplicationControlBar> <mx:ApplicationControlBar color="#EC968F"> <mx:CheckBox label="全屏" id="fs" change="display();"/> </mx:ApplicationControlBar> </mx:ApplicationControlBar> </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>  

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#FFFFFF" creationComplete="srv.send()" currentState="{vd.playing?'videoPlaying':''}"> <mx:states> <mx:State name="videoPlaying"> <mx:SetProperty target="{panel}" name="width" value="652"/> </mx:State> </mx:states> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; import mx.events.CuePointEvent; private function cuePointHandler(event:CuePointEvent):void { caption.text = event.cuePointName; } private function changeHandler():void { vd.cuePointManager.removeAllCuePoints() vd.cuePoints = ArrayCollection(list.selectedItem.cuePoint).source; } ]]--> </mx:Script> <mx:HTTPService id="srv" url="question.xml"/> <mx:Panel title="Frequently Asked Questions" layout="absolute" x="20" y="20" width="320" height="282" id="panel" horizontalScrollPolicy="off" resizeEffect="Resize"> <mx:List id="list" dataProvider="{srv.lastResult.questions.question}" labelField="text" change="changeHandler()" left="0" top="0" bottom="0" width="310"/> <mx:VideoDisplay id="vd" source="{list.selectedItem.video}" height="240" autoPlay="true" cuePointManagerClass="mx.controls.videoClasses.CuePointManager" cuePoint="cuePointHandler(event)" top="1" left="311" width="320"/> <mx:Button label="Stop" click="vd.stop()" x="566" y="8"/> <mx:Text id="caption" x="320" y="200" color="#FFFFFF" fontWeight="bold" height="40" width="320"/> </mx:Panel> </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>  

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