Flex视频播放器开发（初级阶段）教程

开发工具Flex Builder3.0

（一）构建页面：

VideoDisplay播放视频、HSlider进度条、开始、暂停、停止、声音大小、全屏、当前时间/总时间，一个基本的页面在Flex Builder3.0下很快就能构建完成。在这里说明一下，“开始”，“停止”等这些按钮，我是用Image来实现的，而不是Button，因为如果使用Button，其自带有个边框和背景样式，编辑CSS去掉也可以，但是比较麻烦。用Image直接指定一个图片，然后把buttonMode设为true，就和按钮差不多了，当然这个也需要细化，比如鼠标按下和弹起的样式，我这只是初级阶段，就不考虑那么多了！

<mx:Image source="{playClass}" click="playButton();" id="playBtn" buttonMode="true"/> 

     （二）增加基本功能：

      我直接粘贴代码：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="440" width="500" fontSize="12" initialize="init();"> 
      
    <mx:Script> 
        <![CDATA[  
            import mx.controls.Alert;  
            import mx.events.SliderEvent;  
            import mx.events.VideoEvent;  
              
            [Embed(source="assets/videoIco/play_small.png")]  
            [Bindable]  
            private var playClass:Class;                //播放图标样式  
              
            [Embed(source="assets/videoIco/pause.png")]  
            [Bindable]  
            private var pauseClass:Class;               //暂停图标样式  
              
            [Embed(source="assets/videoIco/sound1.png")]  
            [Bindable]  
            private var sound1:Class;               //声音样式1  
              
            [Embed(source="assets/videoIco/sound.png")]  
            [Bindable]  
            private var sound:Class;                //声音样式2（静音）  
              
            [Bindable]  
            private var videoSource:String;         //媒体路径  
              
            private var isPause:Boolean = false;        //暂停状态  
            private var isSound:Boolean = true;         //声音状态  
            private var isFullScreen:Boolean = false;   //是否是全屏  
            private var tmpSound:Number = 0;            //临时声音大小  
            [Bindable]  
            private var playPosition:Number;            //播放進度   
              
            private function init():void{  
                videoSource = parameters.videosource;  
            }  
              
            private function playingMove(event:VideoEvent):void{  
                my_hs.value = myVid.playheadTime;  
            }  
              
            //进度条改变  
            private function hs_onchange(event:SliderEvent):void{  
                if(myVid.playheadTime == -1){  
                    my_hs.value = 0;  
                    return;  
                }  
                playPosition = my_hs.value;             //保正播放进度統一  
                myVid.playheadTime = playPosition;  
            }  
              
            //进度条鼠标按下  
            private function thumbPress():void{  
                myVid.pause();  
            }  
            //进度条鼠标弹起  
            private function thumbRelease():void{  
                myVid.playheadTime = playPosition;  
                myVid.play();  
            }  
              
              
            //播放，暂停  
            private function playButton():void{  
                if(!isPause){  
                    myVid.play();  
                    playBtn.source = pauseClass;  
                    isPause = true;  
                }else{  
                    myVid.pause();  
                    playBtn.source = playClass;  
                    isPause = false;  
                }  
            }  
              
            //播放完成  
            private function vidComplete():void{  
                playBtn.source = playClass;  
                isPause = false;  
            }  
              
            //停止播放  
            private function stopButton():void{  
                myVid.stop();  
                playBtn.source = playClass;  
                isPause = false;  
            }  
              
            //切換全屏顯示  
            private function display():void{  
                if(!isFullScreen){  
                    stage.fullScreenSourceRect =new Rectangle(myVid.x,myVid.y,myVid.width,myVid.height);               
                    stage.displayState =StageDisplayState.FULL_SCREEN;  
                    isFullScreen = true;  
                }else{  
                    stage.displayState = StageDisplayState.NORMAL;  
                    isFullScreen = false;  
                }  
            }  
              
            //调整声音  
            private function sound_thumbChanges(event:SliderEvent):void{  
                myVid.volume = hs_sound.value;  
            }  
              
            //静音  
            private function closeSound():void{  
                if(isSound){  
                    closeImg.source = sound;  
                    tmpSound = myVid.volume;  
                    myVid.volume = 0;  
                    isSound = false;  
                }else{  
                    closeImg.source = sound1;  
                    myVid.volume = tmpSound;  
                    isSound = true;  
                }  
            }  
              
            //格式化时间  
            private function formatTime(time:Number):String{  
                var min:Number = Math.floor(time/60);  
                var sec:Number = Math.floor(time%60);  
                  
                var timeResult:String = (min < 10 ? "0"+min.toString() : min.toString()) + ":" + (sec < 10 ? "0"+sec.toString() : sec.toString());  
                  
                return timeResult;  
            }  
              
            //slider格式化  
            private function dataTipFormat(data:Number):String{  
                return formatTime(data);  
            }  
        ]]> 
    </mx:Script> 
      
    <mx:VideoDisplay id="myVid" x="10" y="10" height="360" width="480"   
            source="{videoSource}"   
            autoPlay="false"   
            playheadUpdate="playingMove(event)"   
            complete="vidComplete();"   
            doubleClickEnabled="true" 
            doubleClick="display();"/> 
 
    <mx:HBox width="473" verticalAlign="middle" x="17" y="395"> 
        <mx:Image source="{playClass}" click="playButton();" id="playBtn" buttonMode="true"/> 
        <mx:Image source="@Embed('assets/videoIco/stop.png')" click="stopButton();" buttonMode="true"/> 
        <mx:Label text="{formatTime(myVid.playheadTime)}/{formatTime(myVid.totalTime)}" width="112"/> 
        <mx:HRule height="0" width="80"/> 
        <mx:Image source="{sound1}" click="closeSound();" id="closeImg" buttonMode="true"/> 
        <mx:HSlider width="96" id="hs_sound" minimum="0" maximum="1"   
            change="sound_thumbChanges(event)" 
            value="{myVid.volume}"   
            fillAlphas="[0.6, 1.0, 1.0, 1.0]"/> 
        <mx:Button label="全屏" click="display();"  cornerRadius="20"/> 
    </mx:HBox> 
    <mx:HSlider width="478" id="my_hs" minimum="0" maximum="{myVid.totalTime}" height="9" x="12" y="378" 
        horizontalCenter="0" 
        showTrackHighlight="true" 
        change="hs_onchange(event)" 
        thumbPress="thumbPress();" 
        thumbRelease="thumbRelease();" 
        dataTipFormatFunction="dataTipFormat"/> 
</mx:Application> 

    videoSource = parameters.videosource; 这个是获取从html文件传进来的flv播放源，在html中使用FlashVars进行参数传递

    这个简易的播放器有以下几个问题还没解决：

    1.进度条按下滑块拖动，拖到新的时间点释放鼠标后，进度条会向后跳动一段距离开始播放，而不是你鼠标放开的那个位置。

    2.在进度条上直接点新的播放点，滑块会先回到原来的播放点，然后才到新的播放点，中间有个这种效果没有去掉

    3.视频的缓冲机制没有处理。（杰然不同 ）