且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇

更新时间:2022-10-01 14:21:25

  本文主要介绍怎么去创建基于FMS的流媒体播放程序,Flash客户端通过网络加载FMS服务器上的视频流文件(.flv,.mp4等),实现视频流的播放。
     要实现媒体流文件的播放是非常简单的,只要在FMS服务器上提供好流媒体文件,Flash客户端通过NetConnection连接到FMS服务器,然后通过NetStream加载就OK。关于怎么连接FMS在本系列的前两篇已有详细介绍,首先得在fms上建立好服务器应用并部署好媒体文件,如下图示:
          FMS3系列(三):创建基于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界面上。如下图示:
          FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇
     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的连接,代表当前应用有一个网络流正在传输,如下图:
 
FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇
完整示例代码
 1FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇import flash.display.*;
 2FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇import flash.events.*;
 3FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇import flash.net.*;
 4FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇import fl.controls.*;
 5FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇
 6FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇var nc:NetConnection = new NetConnection();
 7FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇var ns:NetStream;
 8FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇var video:Video;
 9FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇
10FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇var btnPlay:Button=new Button();
11FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnPlay.x=10;
12FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnPlay.y=250;
13FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnPlay.width=50;
14FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnPlay.label="播放";
15FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnPlay.addEventListener(MouseEvent.CLICK,onPlayHandler);
16FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇addChild(btnPlay);
17FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇
18FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇var btnPause:Button=new Button();
19FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnPause.x=80;
20FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnPause.y=250;
21FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnPause.width=50;
22FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnPause.label="暂停";
23FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnPause.addEventListener(MouseEvent.CLICK,onPauseHandler);
24FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇addChild(btnPause);
25FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇
26FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇var btnStop:Button=new Button();
27FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnStop.x=150;
28FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnStop.y=250;
29FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnStop.width=50;
30FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnStop.label="停止";
31FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnStop.addEventListener(MouseEvent.CLICK,onStopHandler);
32FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇addChild(btnStop);
33FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇
34FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇var btnReplay:Button=new Button();
35FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnReplay.x=220;
36FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnReplay.y=250;
37FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnReplay.width=80;
38FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnReplay.label="重新播放";
39FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇btnReplay.addEventListener(MouseEvent.CLICK,onReplayHandler);
40FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇addChild(btnReplay);
41FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇
42FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇nc.connect("rtmp://192.168.1.103/PlayStreams");
43FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇nc.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);
44FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇
45FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇function onStatusHandler(evt:NetStatusEvent):void
46FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇{
47FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇    trace(evt.info.code);
48FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇    if(evt.info.code=="NetConnection.Connect.Success")
49FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇    {
50FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇        playStream();
51FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇    }

52FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇}

53FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇
54FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇function playStream():void
55FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇{
56FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇    ns=new NetStream(nc);
57FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇    ns.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);
58FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇    ns.client=new CustomClient();
59FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇    video=new Video();
60FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇    video.attachNetStream(ns);
61FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇    ns.play("2009031302",0);
62FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇    addChild(video);
63FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇}

64FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇
65FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇function onPlayHandler(evt:MouseEvent):void
66FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇{
67FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇    ns.resume();
68FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇}

69FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇
70FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇function onPauseHandler(evt:MouseEvent):void
71FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇{
72FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇    ns.pause();
73FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇}

74FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇
75FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇function onStopHandler(evt:MouseEvent):void
76FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇{
77FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇    ns.close();
78FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇}

79FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇
80FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇function onReplayHandler(evt:MouseEvent):void
81FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇{
82FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇    ns.close();
83FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇    playStream();
84FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇}

85FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇
86FMS3系列(三):创建基于FMS的流媒体播放程序,看山寨帮的山寨传奇
 
     如果在Flex环境下开发,更方便实现,详细本文就不做介绍了,核心代码和Flash里开发是一样的。




本文转自 beniao 51CTO博客,原文链接:http://blog.51cto.com/beniao/139285,如需转载请自行联系原作者