现在的位置: 首页 > 综合 > 正文

flex实现的播放器

2013年01月20日 ⁄ 综合 ⁄ 共 13003字 ⁄ 字号 评论关闭
视频录制:
<?xml version="1.0" encoding="utf-8"?>   
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="312" width="328" creationComplete="init()">   
<mx:Script>   
 <![CDATA[   
  //预定义声明   
  import mx.controls.Alert;   
  import mx.events.SliderEvent;   
     
  //创建一个基本的网络连接对象   
  private var vi:Video;   
  private var cam:Camera;      //定义一个摄像头   
  private var inNs:NetStream;   
  private var outNs:NetStream;    
  private var nc:NetConnection;   
  //private var mic:Microphone; //定义一个麦克风   
    
  private var _duration:Number;            //视频播放时间   
  private var playPosition:Number;         //定义播放进度位置   
  //private var soundPosition:Number;    //定义声音大小控制条的位置   
  private var flag:Boolean = false;           
  private var lastVideoName:String = "";   //视频录制后保存的名字   
  private var _url:String = "rtmp://127.0.0.1:1935/videoRec";   
     
  public function init():void{   
   setupCamera();    //初始化摄像头信息   
  }   
  //开始录制按扭点击   
  public function clickConnect():void{   
    nc = new NetConnection();   
    nc.addEventListener(NetStatusEvent.NET_STATUS,nsHandler);   
             nc.connect(_url);         //连接red5服务器   
  }     
  public function nsHandler(evt:NetStatusEvent):void{   
   if (evt.info.code == "NetConnection.Connect.Success"){           //如果连接成功   
    playClick();   
    }else{   
     Alert.show("连接失败");       
    }       
  }   
  //开始录制   
  public function playClick():void{      
   if(vi != null){   
    vi.clear();   
    vdisplay.removeChild(vi);   
    vi = new Video();   
    vi.width = 320;   
    vi.height = 240;   
    vi.attachCamera(cam);   
       vdisplay.addChild(vi);   
   }   
   outNs = new NetStream(nc);          
   outNs.attachCamera(cam);   //把摄像头存入outNs   
   //outNs.attachAudio(mic);          //把麦克风存入outNs   
   lastVideoName = "red5RecordDemo_" + Math.random()+getTimer();   
   outNs.publish(lastVideoName, "record");   
         
   startRec.enabled = false;   
   stopRec.enabled = true;      
  }     
  //停止录制   
  public function stopClick():void{   
   //关闭ns与red5的连接   
   outNs.close();    
   vi.clear();   
   vdisplay.removeChild(vi);     
   //锁定开始按键使其生效   
   startRec.enabled = true;   
   //锁定停止按键使其失效   
   stopRec.enabled = false;   
  }     
  //录制完以后播放   
  public function playLastVideo():void{   
     if(nc!=null){   
      //addEventListener(Event.ENTER_FRAME,onEnterFrame);   
       inNs = new NetStream(nc);   
    //定义onMetaData,获取视频相关数据   
    var customClient:Object = new Object();   
    customClient.onMetaData = function(metadata:Object):void{   
     _duration = metadata.duration; //获取视频持续时间   
     t_sh.maximum = _duration;   
    }   
    inNs.client = customClient;   
    //删除原_localVideo,便于在录制和播放视频之间切换   
    vi = new Video();   
    vi.width = 320;   
    vi.height = 240;   
    vi.attachNetStream(inNs);   
    vdisplay.addChild(vi);    
    inNs.play(lastVideoName+".flv");   
    addEventListener(Event.ENTER_FRAME,onEnterFrame);    
     }   
  }   
     
  //初始化摄像头   
  public function setupCamera():void{   
   //启动摄像头   
   cam = Camera.getCamera();    
   if(cam != null){   
    cam.addEventListener(StatusEvent.STATUS,onStatusHandler);   
    cam.setMode(320,240,30);   
    cam.setQuality(0,70);  //设置清晰度   
    vi = new Video();   
    vi.width = 320;   
    vi.height = 240;   
    vi.attachCamera(cam);   
    vdisplay.addChild(vi);   
  
   }   
//   mic = Microphone.getMicrophone();   
//   if(mic != null){   
//    mic.setSilenceLevel(0,-1); //设置麦克风保持活动状态并持续接收集音频数据   
//    mic.gain = 80; //设置麦克风声音大小   
//   }   
  }   
     
  private function onStatusHandler(event:StatusEvent):void{   
   if(!cam.muted){   //判断摄像头存不存在   
    startRec.enabled = true;   
   }else{   
    Alert.show("错误:无法链接到活动摄像头!")   
   }   
   cam.removeEventListener(StatusEvent.STATUS,onStatusHandler);   
  }   
     
  public function thumbPress(event:SliderEvent):void{   
      inNs.togglePause();   
   removeEventListener(Event.ENTER_FRAME,onEnterFrame);   
  }   
  private function thumbChanges(event:SliderEvent):void{   
    playPosition = t_sh.value;        //当前播放视频进度的位置=当前播放进度条的位置   
    inNs.seek(playPosition);    
    addEventListener(Event.ENTER_FRAME,onEnterFrame);   
  }   
  private function thumbRelease(event:SliderEvent):void{      //释放mouse后执行   
   inNs.seek(playPosition);                             //查找当前进度条位置   
   inNs.togglePause();   
      addEventListener(Event.ENTER_FRAME,onEnterFrame);   
  }   
  public function onEnterFrame(event:Event):void{   
   if(_duration > 0 && inNs.time > 0){ //如果视频时间和正在播放视频的时间大于0   
    t_sh.value =inNs.time;   
    lbtime.text = formatTimes(inNs.time) + " / "+ formatTimes(_duration);   
   }      
   if(formatTimes(inNs.time)==formatTimes(_duration)){    //如果播放完毕,则关毕流,初始化摆放时间的label   
      if(flag==true){        //如果是加载,就不执行 ||false代表是加载,true代表是播放结束   
     removeEventListener(Event.ENTER_FRAME,onEnterFrame);   
     inNs.close();       
     lbtime.text = "0:00 / "+ formatTimes(_duration);   
    }   
       setTimeout(function():void{flag = true;},1000);   
   }   
   }   
  //时间格式操作   
  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 sound_thumbChanges(event:SliderEvent):void{   
//   soundPosition = th_sound.value;   
//  }   
//  private function sound_thumbRelease(event:SliderEvent):void{   
//   vdisplay.volume = soundPosition;   
//  }   
  
 ]]>   
</mx:Script>   
 <mx:VideoDisplay x="0" y="0" width="324.5" height="240" id="vdisplay"/>   
 <mx:Button x="10" y="250" label="开始录制" id="startRec" click="clickConnect()" enabled="false" />   
 <mx:Button x="10" y="280" label="停止录制" width="70" id="stopRec" click="stopClick()" enabled="false" />   
 <mx:Button x="253" y="268" label="播放" click="playLastVideo()"  />   
 <mx:HSlider x="98" y="248" width="143" id="t_sh" thumbPress="thumbPress(event)" thumbRelease="thumbRelease(event)" change="thumbChanges(event)"/>   
 <mx:Label x="237" y="242" text="0:00/0:00" width="89" textAlign="center" height="18" id="lbtime"/>   
 <!--mx:HSlider x="98" y="278" width="91" id="th_sound" minimum="0" maximum="1" value="{vdisplay.volume}" change="sound_thumbChanges(event)" thumbRelease="sound_thumbRelease(event)"/>   
 <mx:Label x="187" y="270" text="sound" height="20" width="44" textAlign="center"/-->    
</mx:Application>   
  
注:   
  
1.red5做服务器,后面代码其实什么也没有,最关键的还是前端flex代码,当然还有些配置问题,相信做过red5  simple   demo的朋友应该知道,在这就不一一细说了.   
  
2.文章中注释地方是音频的录制,因为本机上无麦克风所以就屏掉了。如果要加上些功能,去掉注释即可。   
  
3.以下是前端显示图  
播放器一:
<?xml
 version="1.0" encoding="utf-8"?>   
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  width="835" height="782" >   
<mx:Script>   
  <![CDATA[   
     import mx.events.SliderEvent; // 这里是导入所需要的类, 用 import 关键字, 没什么好说的   
     import mx.events.VideoEvent;   
    import flash.events.KeyboardEvent;   
    import mx.controls.Alert;      
   import flash.display.Stage;   
     private var soundPosition:Number;   
// 自定义一个 playingMove() 函数, 作用: 影片播放时, id 为 " my_hs " 的HSlider 控件的值为影片的播放时间, 且最大值为影片的总时长   
     private function playingMove(event:VideoEvent):void{   
         my_hs.value = flvideo.playheadTime;   
        my_hs.maximum=flvideo.totalTime;   
   }   
// 自定义 hs_onChange() 函数, 作用: 当用户拖拉 HSlider 控件使其值发生改变时,  影片的播放头就处于其值处, 即正在播放时间处于其值处   
    private function hs_onchange(event:SliderEvent):void{   
       flvideo.playheadTime = event.value;   
   }   
//停止   
    private function stopMovie(event:MouseEvent):void{   
        flvideo.stop();   
    }   
//播放   
    private function playMovie(event:MouseEvent):void{   
           
        playUrl(urlText.text);   
           
    }   
//暂停   
    private function pauseMovie(event:MouseEvent):void{   
        flvideo.pause();   
    }   
//下拉框   
    private function onChangeUrl(event:KeyboardEvent):void{   
        trace(event.keyCode);   
        if(event.keyCode==13){   
        playUrl(urlText.text);   
           
     }   
    }     
    private function playUrl(url:String):void  
    {   
        if(flvideo.playing)   
         flvideo.stop();   
           
        flvideo.source = url;   
        flvideo.play();   
    }   
   //声音音量控制                     
            private function sound_thumbChanges(event:SliderEvent):void{   
                soundPosition = hs_sound.value;   
            }   
               
            
            private function sound_thumbRelease(event:SliderEvent):void{   
                flvideo.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 displayStateChange():void  
            {   
                if(displayChk.selected)   
                {   
                    stage.displayState="fullScreen";   
                }else{   
                    stage.displayState="normal";   
                }   
            }   
               
  ]]>   
</mx:Script>   
<mx:XML id="xmlData" source="FlvData.xml" format="xml" />   
<mx:VideoDisplay id="flvideo" playheadUpdate="playingMove(event)"  x="10" y="10" autoPlay="false" bufferTime="0.5" maintainAspectRatio="false" width="294" height="219"/>   
    <mx:ControlBar id="ctrlBar" x="10" y="237" width="545" height="52">   
          <mx:TextInput id="urlText" width="150" keyUp="onChangeUrl(event)" fontFamily="Arial" fontSize="12" color="#2C2B3A" enabled="true" height="26" toolTip="请输入flv文件的网络地址"/>   
        <mx:Button  label="Play" click="playMovie(event)"/>   
        <mx:Button  label="Stop" click="stopMovie(event)"/>   
        <mx:Button  label="pause" click="pauseMovie(event)"/>   
           
    </mx:ControlBar>   
    <mx:ControlBar id="ctrlBar0" x="10" y="297" width="545" height="52">   
    <mx:Label    
        text="音量"  
        color="#ffffff"/>   
         <!--播放器声音控制 -->   
        <mx:HSlider id="hs_sound" width="80"  
            minimum="0" maximum="1"  
            thumbRelease="sound_thumbRelease(event)"    
            change="sound_thumbChanges(event)"  
            value="{flvideo.volume}" />   
        <mx:CheckBox id="displayChk" label="全屏模式" change="displayStateChange()"/>   
          
    </mx:ControlBar>   
    <mx:ControlBar id="ctrlBar1" x="10" y="357" width="545" height="52">   
        <mx:Label x="480" y="341" id="playtime"    
        text="{formatTimes(flvideo.playheadTime)} : {formatTimes(flvideo.totalTime)}"  
        color="#ffffff"/>   
        <mx:HSlider  minimum="0"  id="my_hs"  change="hs_onchange(event)" width="179"/>   
          
    </mx:ControlBar>   
</mx:Application> 
 
播放器二:
 
<?xml version="1.0" encoding="utf-8" ?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
    <![CDATA[ 
    
    /** Cato Paus Skrede
        UmbrellaCorp DA **/
    
    [Bindable]
    private var movie:String;
    
    private function setSource():void{
        //movie = "http://stage.orchestra.it/x.flv"; // some dud dancing 16 min sample.
        movie = "http://58.211.2.168/v2blog/2007/03/31/1175351546716-converted.flv";
    
        // the url of the FLV ver. 1.1 do contains the metaData for totalTime FLV ver 1.0 do's NOT.
        /* if you type the url into VideoDisplay.source and use autoplay it starts to play in design mode
           that's realy annoying.*/
    }
    private function formatPositionToolTip(value:int):String{
        
        //  do only handle minuts.
        
        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;
    }
   
  ]]> 
  </mx:Script>
<mx:Panel layout="absolute" width="400" height="400" headerHeight="0" cornerRadius="2" borderStyle="solid" borderThickness="0" borderThicknessBottom="0" borderThicknessLeft="0" borderThicknessRight="0" borderThicknessTop="0" backgroundColor="#000000">
  <mx:VideoDisplay id="videoDisplay" source="{movie}" width="380" height="310" left="10" top="10" /> 
  <mx:ProgressBar id="loadProgress" label="" mode="event" barColor="#00ff00" minimum="0" maximum="100" y="336" height="20" source="{videoDisplay}" trackHeight="10" trackColors="[#00ff00, #e6eeee]" left="10" right="10" /> 
  <mx:HSlider id="position" height="5" dataTipFormatFunction="formatPositionToolTip" thumbPress="videoDisplay.pause()" slideDuration="0" thumbRelease="videoDisplay.play()" change="videoDisplay.playheadTime = position.value" value="{videoDisplay.playheadTime}" minimum="0" maximum="{videoDisplay.totalTime}" left="4" right="4" bottom="62" /> 
  <mx:Button label="Play" click="videoDisplay.play();" cornerRadius="0" bottom="10" x="10" /> 
  <mx:Button label="Pause" click="videoDisplay.pause();" cornerRadius="0" bottom="10" left="69" /> 
  <mx:Button label="Stop" click="videoDisplay.stop();" cornerRadius="0" left="138" bottom="10" /> 
  <mx:HSlider id="volume" snapInterval="0.01" value="0.5" maximum="1.0" change="videoDisplay.volume = volume.value;" liveDragging="true" height="20" left="236" bottom="20" width="154" /> 
  <mx:Label styleName="playheadTimeLabel" text="{formatPositionToolTip(videoDisplay.playheadTime)} - {formatPositionToolTip(videoDisplay.totalTime)}" color="#ffffff" left="5" top="0" /> 
  </mx:Panel>
  <mx:Button click="setSource()" label="Get FLV" /> 
</mx:Application>
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/lentonnet/archive/2007/11/08/1873463.aspx
 
 
 
控制音量
 
简单了点,但能实现功能就足够了.用了 aswing的 jSlider,使用前先要配置好  aswing类库.
 
package {
 import flash.display.Sprite;
 import flash.media.SoundMixer;
 import flash.media.SoundTransform;
 import org.aswing.JSlider;
 import org.aswing.event.InteractiveEvent ;
 /**
  * ...
  * @低B仔同学 2009
  */
 public class  SoundVolumeSlider extends Sprite 
 {
  
  public var jSld:JSlider = new JSlider( 0,0, 100, 100);
  
  public function SoundVolumeSlider():void {
   
   jSld.width = 100;
   jSld.height = 20;
   addChild(jSld);
   jSld.addStateListener(onSldChange);
   
  }
  
  private function onSldChange(e:InteractiveEvent):void {
   var val:int = (e.target as JSlider).getValue();
   var numVal:Number = val / 100;
   
   if (e.isProgrammatic() == false) {  //手动改变
    var tsf:SoundTransform = new SoundTransform(numVal);
    SoundMixer.soundTransform = tsf;
   }
   
  }
  
 }
 
}
【上篇】
【下篇】

抱歉!评论已关闭.