创建基于FMS的流媒体播放程序-FMS3系列教程3

本文主要介绍怎么去创建基于FMS的流媒体播放程序，Flash客户端通过网络加载FMS服务器上的视频流文件(.flv,.mp4等)，实现视频流的播放。

     要实现媒体流文件的播放是非常简单的，只要在FMS服务器上提供好流媒体文件，Flash客户端通过NetConnection连接到FMS服务器，然后通过NetStream加载就OK。关于怎么连接FMS在本系列的前两篇已有详细介绍，首先得在fms上建立好服务器应用并部署好媒体文件，如下图示：

           

 

     下面是在Flash中开发的流媒体文件播放示例程序：

 

 import flash.display.*; 
 import flash.events.*; 
 import flash.net.*; 
  
 var nc:NetConnection = new NetConnection(); 
 var ns:NetStream; 
 var video:Video; 
  
 nc.connect("rtmp://localhost/PlayStreams"); 
 nc.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler); 
  
 function onStatusHandler(evt:NetStatusEvent):void 
 { 
     trace(evt.info.code); 
     if(evt.info.code=="NetConnection.Connect.Success") 
     { 
         ns=new NetStream(nc); 
         ns.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler); 
         ns.client=new CustomClient(); 
         video=new Video(); 
         video.attachNetStream(ns); 
         ns.play("2009031301",0); 
         addChild(video); 
     } 
 }

 

看看上面的程序代码是不是非常简单，现在我对上面的代码进行详细的分析。程序从上到下思路很清晰，首先将程序中需要的相关包导入，然后定义了连接对象(NetConnection)，流对象(NetStream)和视频对象(Video)。

     通过NetConnection的connect方法连接到fms服务器(rtmp://localhost/PlayStreams)，并添加网络连接的事件处理函数，在此函数内判断网络连接状态，如果连接成功(连接状态：NetConnection.Connect.Success)则通过NetStream建立视频流，调用NetStream的play方法播放指定的流媒体文件，然后将流附加到视频对象并显示在flash界面上。如下图示：

          
 

     OK，我们已经实现了流媒体文件的播放，下面我们来扩展程序的功能，为前面的视频播放程序加上播放、暂停、停止以及重新播放等功能。这时可以在界面上放置几个按扭来驱动这些功能，添加按扭代码如下(当然也可以直接拖拽Botton组件):

 

 var btnPlay:Button=new Button(); 
 btnPlay.x=10; 
 btnPlay.y=250; 
 btnPlay.width=50; 
 btnPlay.label="播放"; 
 btnPlay.addEventListener(MouseEvent.CLICK,onPlayHandler); 
 addChild(btnPlay); 
  
 var btnPause:Button=new Button(); 
 btnPause.x=80; 
 btnPause.y=250; 
 btnPause.width=50; 
 btnPause.label="暂停"; 
 btnPause.addEventListener(MouseEvent.CLICK,onPauseHandler); 
 addChild(btnPause); 
  
 var btnStop:Button=new Button(); 
 btnStop.x=150; 
 btnStop.y=250; 
 btnStop.width=50; 
 btnStop.label="停止"; 
 btnStop.addEventListener(MouseEvent.CLICK,onStopHandler); 
 addChild(btnStop); 
  
 var btnReplay:Button=new Button(); 
 btnReplay.x=220; 
 btnReplay.y=250; 
 btnReplay.width=80; 
 btnReplay.label="重新播放"; 
 btnReplay.addEventListener(MouseEvent.CLICK,onReplayHandler); 
 addChild(btnReplay); 
  
 function onPlayHandler(evt:MouseEvent):void 
 {} 
  
 function onPauseHandler(evt:MouseEvent):void 
 {} 
  
 function onStopHandler(evt:MouseEvent):void 
 {} 
  
 function onReplayHandler(evt:MouseEvent):void 
 {}
 

这里我们需要对上面的代码进行一下重构，将流和控制视频播放的代码重构为方法，以便在重新播放的时候直接调用。

 function playStream():void 
 { 
     ns=new NetStream(nc); 
     ns.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler); 
     ns.client=new CustomClient(); 
     video=new Video(); 
     video.attachNetStream(ns); 
     ns.play("2009031302",0); 
     addChild(video); 
 }

 

 上面我们已经将控制视频播放、暂停、停止和重新播放的按扭构造在了flash界面上，现在只需要完成这些按扭的功能就是，要实现视频的播放、暂停、停止和重新播放同样是非常简单的，NetStream为我们提供了可直接调用的API。详细如下：

 function onPlayHandler(evt:MouseEvent):void 
 { 
     ns.resume(); 
 } 
  
 function onPauseHandler(evt:MouseEvent):void 
 { 
     ns.pause(); 
 } 
  
 function onStopHandler(evt:MouseEvent):void 
 { 
     ns.close(); 
 } 
  
 function onReplayHandler(evt:MouseEvent):void 
 { 
     ns.close(); 
     playStream(); 
 }

 

一切搞定 ，可以按下Ctrl+Enter测试了，看到了flash已经成功的加载到了fms上的视频文件(.flv)。打开FMS管理控制台就会看到，在应用"PlayStreams"下有一个NetStream的连接，代表当前应用有一个网络流正在传输，如下图：

 

 

import flash.display.*; 
import flash.events.*; 
import flash.net.*; 
import fl.controls.*;

var nc:NetConnection = new NetConnection(); 
var ns:NetStream; 
var video:Video;

var btnPlay:Button=new Button(); 
btnPlay.x=10; 
btnPlay.y=250; 
btnPlay.width=50; 
btnPlay.label="播放"; 
btnPlay.addEventListener(MouseEvent.CLICK,onPlayHandler); 
addChild(btnPlay);

var btnPause:Button=new Button(); 
btnPause.x=80; 
btnPause.y=250; 
btnPause.width=50; 
btnPause.label="暂停"; 
btnPause.addEventListener(MouseEvent.CLICK,onPauseHandler); 
addChild(btnPause);

var btnStop:Button=new Button(); 
btnStop.x=150; 
btnStop.y=250; 
btnStop.width=50; 
btnStop.label="停止"; 
btnStop.addEventListener(MouseEvent.CLICK,onStopHandler); 
addChild(btnStop);

var btnReplay:Button=new Button(); 
btnReplay.x=220; 
btnReplay.y=250; 
btnReplay.width=80; 
btnReplay.label="重新播放"; 
btnReplay.addEventListener(MouseEvent.CLICK,onReplayHandler); 
addChild(btnReplay);

nc.connect("rtmp://192.168.1.103/PlayStreams"); 
nc.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);

function onStatusHandler(evt:NetStatusEvent):void 
{ 
    trace(evt.info.code); 
    if(evt.info.code=="NetConnection.Connect.Success") 
    { 
        playStream(); 
    } 
}

function playStream():void 
{ 
    ns=new NetStream(nc); 
    ns.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler); 
    ns.client=new CustomClient(); 
    video=new Video(); 
    video.attachNetStream(ns); 
    ns.play("2009031302",0); 
    addChild(video); 
}

function onPlayHandler(evt:MouseEvent):void 
{ 
    ns.resume(); 
}

function onPauseHandler(evt:MouseEvent):void 
{ 
    ns.pause(); 
}

function onStopHandler(evt:MouseEvent):void 
{ 
    ns.close(); 
}

function onReplayHandler(evt:MouseEvent):void 
{ 
    ns.close(); 
    playStream(); 
}