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:附件图片是播放器效果图

评论

2 楼 lastlucifier 2010-08-09  

LZ的第一个问题偶也遇到了，不知道LZ解决了没。。。。坐等

1 楼 ganky 2010-06-12  

这个不能在一般手机上播放吧……