FMS3系列(三)：创建基于FMS的流媒体播放程序

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

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

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

1 import flash.display.*;
2 import flash.events.*;
3 import flash.net.*;
4
5 var nc:NetConnection = new NetConnection();
6 var ns:NetStream;
7 var video:Video;
8
9 nc.connect("rtmp://localhost/PlayStreams");
10 nc.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);
11
12 function onStatusHandler(evt:NetStatusEvent):void
13 {
14     trace(evt.info.code);
15 if(evt.info.code=="NetConnection.Connect.Success")
16     {
17         ns=new NetStream(nc);
18         ns.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);
19         ns.client=new CustomClient();
20         video=new Video();
21         video.attachNetStream(ns);
22         ns.play("2009031301",0);
23         addChild(video);
24     }
25 }

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

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

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

1 var btnPlay:Button=new Button();
2 btnPlay.x=10;
3 btnPlay.y=250;
4 btnPlay.width=50;
5 btnPlay.label="播放";
6 btnPlay.addEventListener(MouseEvent.CLICK,onPlayHandler);
7 addChild(btnPlay);
8
9 var btnPause:Button=new Button();
10 btnPause.x=80;
11 btnPause.y=250;
12 btnPause.width=50;
13 btnPause.label="暂停";
14 btnPause.addEventListener(MouseEvent.CLICK,onPauseHandler);
15 addChild(btnPause);
16
17 var btnStop:Button=new Button();
18 btnStop.x=150;
19 btnStop.y=250;
20 btnStop.width=50;
21 btnStop.label="停止";
22 btnStop.addEventListener(MouseEvent.CLICK,onStopHandler);
23 addChild(btnStop);
24
25 var btnReplay:Button=new Button();
26 btnReplay.x=220;
27 btnReplay.y=250;
28 btnReplay.width=80;
29 btnReplay.label="重新播放";
30 btnReplay.addEventListener(MouseEvent.CLICK,onReplayHandler);
31 addChild(btnReplay);
32
33 function onPlayHandler(evt:MouseEvent):void
34 {}
35
36 function onPauseHandler(evt:MouseEvent):void
37 {}
38
39 function onStopHandler(evt:MouseEvent):void
40 {}
41
42 function onReplayHandler(evt:MouseEvent):void
43 {}

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

1 function playStream():void
2 {
3     ns=new NetStream(nc);
4     ns.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);
5     ns.client=new CustomClient();
6     video=new Video();
7     video.attachNetStream(ns);
8     ns.play("2009031302",0);
9     addChild(video);
10 }

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

1 function onPlayHandler(evt:MouseEvent):void
2 {
3     ns.resume();
4 }
5
6 function onPauseHandler(evt:MouseEvent):void
7 {
8     ns.pause();
9 }
10
11 function onStopHandler(evt:MouseEvent):void
12 {
13     ns.close();
14 }
15
16 function onReplayHandler(evt:MouseEvent):void
17 {
18     ns.close();
19     playStream();
20 }

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

完整示例代码
1import flash.display.*;
2import flash.events.*;
3import flash.net.*;
4import fl.controls.*;
5
6var nc:NetConnection = new NetConnection();
7var ns:NetStream;
8var video:Video;
9
10var btnPlay:Button=new Button();
11btnPlay.x=10;
12btnPlay.y=250;
13btnPlay.width=50;
14btnPlay.label="播放";
15btnPlay.addEventListener(MouseEvent.CLICK,onPlayHandler);
16addChild(btnPlay);
17
18var btnPause:Button=new Button();
19btnPause.x=80;
20btnPause.y=250;
21btnPause.width=50;
22btnPause.label="暂停";
23btnPause.addEventListener(MouseEvent.CLICK,onPauseHandler);
24addChild(btnPause);
25
26var btnStop:Button=new Button();
27btnStop.x=150;
28btnStop.y=250;
29btnStop.width=50;
30btnStop.label="停止";
31btnStop.addEventListener(MouseEvent.CLICK,onStopHandler);
32addChild(btnStop);
33
34var btnReplay:Button=new Button();
35btnReplay.x=220;
36btnReplay.y=250;
37btnReplay.width=80;
38btnReplay.label="重新播放";
39btnReplay.addEventListener(MouseEvent.CLICK,onReplayHandler);
40addChild(btnReplay);
41
42nc.connect("rtmp://192.168.1.103/PlayStreams");
43nc.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);
44
45function onStatusHandler(evt:NetStatusEvent):void
46{
47    trace(evt.info.code);
48 if(evt.info.code=="NetConnection.Connect.Success")
49{
50        playStream();
51    }
52}
53
54function playStream():void
55{
56    ns=new NetStream(nc);
57    ns.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);
58    ns.client=new CustomClient();
59    video=new Video();
60    video.attachNetStream(ns);
61    ns.play("2009031302",0);
62    addChild(video);
63}
64
65function onPlayHandler(evt:MouseEvent):void
66{
67    ns.resume();
68}
69
70function onPauseHandler(evt:MouseEvent):void
71{
72    ns.pause();
73}
74
75function onStopHandler(evt:MouseEvent):void
76{
77    ns.close();
78}
79
80function onReplayHandler(evt:MouseEvent):void
81{
82    ns.close();
83    playStream();
84}
85
86