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

杰然不同

      最近领导安排我研究视频邮件的实现，想加到我们的手机邮箱项目当中！由于时间紧迫，视频的录制暂不考虑，用户提供视频文件上传，我们提供播放页面就ok了。于是任务的重点就放到视频播放器的开发。
 
      开发工具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.视频的缓冲机制没有处理
 
这3个问题将是我下个阶段处理的重点！
 
ps:附件图片是播放器效果图