Java与Flex学习笔记（17）---Flex+Red5实现在线视频播放

      每当在招聘网站上查看Flex岗位时，总看到一部分企业对Flex开发“攻城狮”要求对Red5 有一定了解。本人对Red5 服务器有了一定的认识后，我就迫不及待的想要实现这个Flex+Red5 播放视频的功能。经过几晚的摸索，今晚终于搞出来了，那个兴奋啊~

       Flex3中对流媒体的支持不是很好，但是Flex4 却对rtmp协议有了很好的支持，能够自动识别rtmp协议，经本人认证确实如此，连接rtmp协议几乎不用多些什么代码，当然支持的视频当然是Flv格式啦。好了，请看本人的代码：

<?xmlversion="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" >
    <fx:Script>
       <![CDATA[
           import mx.collections.ArrayCollection;
           import mx.controls.Alert;
           import mx.controls.dataGridClasses.DataGridItemRenderer;
           import mx.events.FlexEvent;
           private var conn:NetConnection;
           private var stream:NetStream;
           [Bindable]
           private var fileUrl:String="";   //歌曲链接地址
           [Bindable]
           private varsongList:ArrayCollection=new ArrayCollection([
              {showName:'恋上另一个人',songer:'游鸿明',filmName:'chirsyu_lslygr.flv'},
              {showName:'一天一万年',songer:'游鸿明',filmName:'chirisyu_ytywn.flv'},
              {showName:'下沙',songer:'游鸿明',filmName:'chirisyu_xs.flv'},
              {showName:'五月的雪',songer:'游鸿明',filmName:'chirisyu_wydx.flv'},
              {showName:'楼下那个女人',songer:'游鸿明',filmName:'chirisyu_lxngnr.flv'},
              {showName:'白色恋人',songer:'游鸿明',filmName:'chirisyu_bslr.flv'}
            ]);
          
           private function netStatusHandler(event:NetStatusEvent):void{
              switch(event.info.code)
              {
                  case "NetConnection.Connect.Success":
                  {
                     connectStream();
                     break;
                  }
                  case "NetStream.Play.StreamNotFound":{
                     Alert.show("文件不存在！","提示");
                     break;
                  }  
                 
              }
           }
           private function connectStream():void{
              stream=new NetStream(conn);
              stream.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler);
              stream.addEventListener(AsyncErrorEvent.ASYNC_ERROR,asyncErrorHandler);
              var video:Video=new Video();  //定义一个播放器
              video.width=300;
              video.height=335;
              video.attachNetStream(stream);
              stream.play(fileUrl);
              videoDisplay.addChild(video);
           }
           private function securityErrorHandler(event:SecurityErrorEvent):void{
           }
           private function asyncErrorHandler(event:AsyncErrorEvent):void{
           }
          
           protected function showList_clickHandler(event:MouseEvent):void
           {            
              // TODOAuto-generated method stub
              var dataGridItemRenderer:DataGridItemRenderer=event.target asDataGridItemRenderer;
              fileUrl=event.target.data['filmName'];
              if(dataGridItemRenderer!=null){
                  //需要捕获此异常，否则程序无法运行
                  try{
                     if(conn.connected){
                         conn.close();
                     }
                  }catch(e:Error){}
                  conn=new NetConnection;
                  conn.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler);
                  conn.addEventListener(SecurityErrorEvent.SECURITY_ERROR,securityErrorHandler);
                  conn.connect("rtmp://localhost/oflaDemo");    //连接Red5服务器
                 
              }
           }
          
       ]]>
    </fx:Script>
    <fx:Declarations>
       <!-- Place non-visualelements (e.g., services, value objects) here -->
    </fx:Declarations>
   
    <mx:HDividedBox x="194" y="68" width="750" height="430" fontSize="16"  fontWeight="bold">
      
       <s:Panel height="421" width="50%" title="MV列表" >
           <mx:DataGrid width="100%" height="100%" dataProvider="{songList}" id="showList"click="showList_clickHandler(event)">
              <mx:columns>
                  <mx:DataGridColumn headerText="歌曲名" dataField="showName" width="250"/>
                  <mx:DataGridColumn headerText="演唱者" dataField="songer" />
                  <mx:DataGridColumn headerText="链接地址" dataField="filmName" visible="false" />
              </mx:columns>
           </mx:DataGrid>
       </s:Panel>
       <s:Panel width="350" height="419" title="MV预览">
           <s:VideoDisplay id="videoDisplay" x="20" y="20" width="100%" height="100%"/>
       </s:Panel>
    </mx:HDividedBox>
   
</s:Application>
 

 

      部分注释详见代码中，点击左侧的MV名，即可在右侧播放，献上一幅图：

   

         PS:原谅我，本人是游鸿明忠实的歌迷，所以电脑里有的都是鸿明的MV，`(*∩_∩*)′…

        好了，夜很深了，我要睡觉了，就到这，…

        原创文章，转载请注明出处：http://www.dianfusoft.com/