视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > 播放器教程 >

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

时间:2012-08-28 10:17iteye.com
VideoDisplay播放视频、HSlider进度条、开始、暂停、停止、声音大小、全屏、当前时间/总时间，一个基本的页面在Flex Builder3.0下很快就能构建完成。在这里说明一下，开始，停止等这些按钮，我是用Image来实现的，而不是Button，因为如果使用Button，其自带有

开发工具Flex Builder3.0

 

（一）构建页面：

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

 

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

     （二）增加基本功能：

      我直接粘贴代码：

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="440" width="500" fontSize="12" initialize="init();"> 
  3.       
  4.     <mx:Script> 
  5.         <![CDATA[  
  6.             import mx.controls.Alert;  
  7.             import mx.events.SliderEvent;  
  8.             import mx.events.VideoEvent;  
  9.               
  10.             [Embed(source="assets/videoIco/play_small.png")]  
  11.             [Bindable]  
  12.             private var playClass:Class;                //播放图标样式  
  13.               
  14.             [Embed(source="assets/videoIco/pause.png")]  
  15.             [Bindable]  
  16.             private var pauseClass:Class;               //暂停图标样式  
  17.               
  18.             [Embed(source="assets/videoIco/sound1.png")]  
  19.             [Bindable]  
  20.             private var sound1:Class;               //声音样式1  
  21.               
  22.             [Embed(source="assets/videoIco/sound.png")]  
  23.             [Bindable]  
  24.             private var sound:Class;                //声音样式2（静音）  
  25.               
  26.             [Bindable]  
  27.             private var videoSource:String;         //媒体路径  
  28.               
  29.             private var isPause:Boolean = false;        //暂停状态  
  30.             private var isSound:Boolean = true;         //声音状态  
  31.             private var isFullScreen:Boolean = false;   //是否是全屏  
  32.             private var tmpSound:Number = 0;            //临时声音大小  
  33.             [Bindable]  
  34.             private var playPosition:Number;            //播放進度   
  35.               
  36.             private function init():void{  
  37.                 videoSource = parameters.videosource;  
  38.             }  
  39.               
  40.             private function playingMove(event:VideoEvent):void{  
  41.                 my_hs.value = myVid.playheadTime;  
  42.             }  
  43.               
  44.             //进度条改变  
  45.             private function hs_onchange(event:SliderEvent):void{  
  46.                 if(myVid.playheadTime == -1){  
  47.                     my_hs.value = 0;  
  48.                     return;  
  49.                 }  
  50.                 playPosition = my_hs.value;             //保正播放进度統一  
  51.                 myVid.playheadTime = playPosition;  
  52.             }  
  53.               
  54.             //进度条鼠标按下  
  55.             private function thumbPress():void{  
  56.                 myVid.pause();  
  57.             }  
  58.             //进度条鼠标弹起  
  59.             private function thumbRelease():void{  
  60.                 myVid.playheadTime = playPosition;  
  61.                 myVid.play();  
  62.             }  
  63.               
  64.               
  65.             //播放，暂停  
  66.             private function playButton():void{  
  67.                 if(!isPause){  
  68.                     myVid.play();  
  69.                     playBtn.source = pauseClass;  
  70.                     isPause = true;  
  71.                 }else{  
  72.                     myVid.pause();  
  73.                     playBtn.source = playClass;  
  74.                     isPause = false;  
  75.                 }  
  76.             }  
  77.               
  78.             //播放完成  
  79.             private function vidComplete():void{  
  80.                 playBtn.source = playClass;  
  81.                 isPause = false;  
  82.             }  
  83.               
  84.             //停止播放  
  85.             private function stopButton():void{  
  86.                 myVid.stop();  
  87.                 playBtn.source = playClass;  
  88.                 isPause = false;  
  89.             }  
  90.               
  91.             //切換全屏顯示  
  92.             private function display():void{  
  93.                 if(!isFullScreen){  
  94.                     stage.fullScreenSourceRect =new Rectangle(myVid.x,myVid.y,myVid.width,myVid.height);               
  95.                     stage.displayState =StageDisplayState.FULL_SCREEN;  
  96.                     isFullScreen = true;  
  97.                 }else{  
  98.                     stage.displayState = StageDisplayState.NORMAL;  
  99.                     isFullScreen = false;  
  100.                 }  
  101.             }  
  102.               
  103.             //调整声音  
  104.             private function sound_thumbChanges(event:SliderEvent):void{  
  105.                 myVid.volume = hs_sound.value;  
  106.             }  
  107.               
  108.             //静音  
  109.             private function closeSound():void{  
  110.                 if(isSound){  
  111.                     closeImg.source = sound;  
  112.                     tmpSound = myVid.volume;  
  113.                     myVid.volume = 0;  
  114.                     isSound = false;  
  115.                 }else{  
  116.                     closeImg.source = sound1;  
  117.                     myVid.volume = tmpSound;  
  118.                     isSound = true;  
  119.                 }  
  120.             }  
  121.               
  122.             //格式化时间  
  123.             private function formatTime(time:Number):String{  
  124.                 var min:Number = Math.floor(time/60);  
  125.                 var sec:Number = Math.floor(time%60);  
  126.                   
  127.                 var timeResult:String = (min < 10 ? "0"+min.toString() : min.toString()) + ":" + (sec < 10 ? "0"+sec.toString() : sec.toString());  
  128.                   
  129.                 return timeResult;  
  130.             }  
  131.               
  132.             //slider格式化  
  133.             private function dataTipFormat(data:Number):String{  
  134.                 return formatTime(data);  
  135.             }  
  136.         ]]> 
  137.     </mx:Script> 
  138.       
  139.     <mx:VideoDisplay id="myVid" x="10" y="10" height="360" width="480"   
  140.             source="{videoSource}"   
  141.             autoPlay="false"   
  142.             playheadUpdate="playingMove(event)"   
  143.             complete="vidComplete();"   
  144.             doubleClickEnabled="true" 
  145.             doubleClick="display();"/> 
  146.  
  147.     <mx:HBox width="473" verticalAlign="middle" x="17" y="395"> 
  148.         <mx:Image source="{playClass}" click="playButton();" id="playBtn" buttonMode="true"/> 
  149.         <mx:Image source="@Embed('assets/videoIco/stop.png')" click="stopButton();" buttonMode="true"/> 
  150.         <mx:Label text="{formatTime(myVid.playheadTime)}/{formatTime(myVid.totalTime)}" width="112"/> 
  151.         <mx:HRule height="0" width="80"/> 
  152.         <mx:Image source="{sound1}" click="closeSound();" id="closeImg" buttonMode="true"/> 
  153.         <mx:HSlider width="96" id="hs_sound" minimum="0" maximum="1"   
  154.             change="sound_thumbChanges(event)" 
  155.             value="{myVid.volume}"   
  156.             fillAlphas="[0.6, 1.0, 1.0, 1.0]"/> 
  157.         <mx:Button label="全屏" click="display();"  cornerRadius="20"/> 
  158.     </mx:HBox> 
  159.     <mx:HSlider width="478" id="my_hs" minimum="0" maximum="{myVid.totalTime}" height="9" x="12" y="378" 
  160.         horizontalCenter="0" 
  161.         showTrackHighlight="true" 
  162.         change="hs_onchange(event)" 
  163.         thumbPress="thumbPress();" 
  164.         thumbRelease="thumbRelease();" 
  165.         dataTipFormatFunction="dataTipFormat"/> 
  166. </mx:Application> 

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

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

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

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

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

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器