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

转载:http://www.pin5i.com/showtopic-23198.html

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


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

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

    下面是在Flash中开发的流媒体文件播放示例程序:
  1. 1 import flash.display.*;
  2. 2 import flash.events.*;
  3. 3 import flash.net.*;

  4. 5 var nc:NetConnection = new NetConnection();
  5. 6 var ns:NetStream;
  6. 7 var video:Video;

  7. 9 nc.connect("rtmp://localhost/PlayStreams");
  8. 10 nc.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);
  9. 11 
  10. 12 function onStatusHandler(evt:NetStatusEvent):void
  11. 13 {
  12. 14    trace(evt.info.code);
  13. 15    if(evt.info.code=="NetConnection.Connect.Success")
  14. 16    {
  15. 17        ns=new NetStream(nc);
  16. 18        ns.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);
  17. 19        ns.client=new CustomClient();
  18. 20        video=new Video();
  19. 21        video.attachNetStream(ns);
  20. 22        ns.play("2009031301",0);
  21. 23        addChild(video);
  22. 24    }
  23. 25 }
复制代码
看看上面的程序代码是不是非常简单,现在我对上面的代码进行详细的分析。程序从上到下思路很清晰,首先将程序中需要的相关包导入,然后定义了连接对象(NetConnection),流对象(NetStream)和视频对象(Video)。

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

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

    OK,我们已经实现了流媒体文件的播放,下面我们来扩展程序的功能,为前面的视频播放程序加上播放、暂停、停止以及重新播放等功能。这时可以在界面上放置几个按扭来驱动这些功能,添加按扭代码如下(当然也可以直接拖拽Botton 组件 ):
  1. 1 var btnPlay:Button=new Button();
  2. 2 btnPlay.x=10;
  3. 3 btnPlay.y=250;
  4. 4 btnPlay.width=50;
  5. 5 btnPlay.label="播放";
  6. 6 btnPlay.addEventListener(MouseEvent.CLICK,onPlayHandler);
  7. 7 addChild(btnPlay);

  8. 9 var btnPause:Button=new Button();
  9. 10 btnPause.x=80;
  10. 11 btnPause.y=250;
  11. 12 btnPause.width=50;
  12. 13 btnPause.label="暂停";
  13. 14 btnPause.addEventListener(MouseEvent.CLICK,onPauseHandler);
  14. 15 addChild(btnPause);
  15. 16 
  16. 17 var btnStop:Button=new Button();
  17. 18 btnStop.x=150;
  18. 19 btnStop.y=250;
  19. 20 btnStop.width=50;
  20. 21 btnStop.label="停止";
  21. 22 btnStop.addEventListener(MouseEvent.CLICK,onStopHandler);
  22. 23 addChild(btnStop);
  23. 24 
  24. 25 var btnReplay:Button=new Button();
  25. 26 btnReplay.x=220;
  26. 27 btnReplay.y=250;
  27. 28 btnReplay.width=80;
  28. 29 btnReplay.label="重新播放";
  29. 30 btnReplay.addEventListener(MouseEvent.CLICK,onReplayHandler);
  30. 31 addChild(btnReplay);
  31. 32 
  32. 33 function onPlayHandler(evt:MouseEvent):void
  33. 34 {}
  34. 35 
  35. 36 function onPauseHandler(evt:MouseEvent):void
  36. 37 {}
  37. 38 
  38. 39 function onStopHandler(evt:MouseEvent):void
  39. 40 {}
  40. 41 
  41. 42 function onReplayHandler(evt:MouseEvent):void
  42. 43 {}
复制代码
这里我们需要对上面的代码进行一下重构,将流和控制视频播放的代码重构为方法,以便在重新播放的时候直接调用。
  1. 1 function playStream():void
  2. 2 {
  3. 3    ns=new NetStream(nc);
  4. 4    ns.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);
  5. 5    ns.client=new CustomClient();
  6. 6    video=new Video();
  7. 7    video.attachNetStream(ns);
  8. 8    ns.play("2009031302",0);
  9. 9    addChild(video);
  10. 10 }
复制代码
上面我们已经将控制视频播放、暂停、停止和重新播放的按扭构造在了flash界面上,现在只需要完成这些按扭的功能就是,要实现视频的播放、暂停、停止和重新播放同样是非常简单的,NetStream为我们提供了可直接调用的 API 。详细如下:
  1. 1 function onPlayHandler(evt:MouseEvent):void
  2. 2 {
  3. 3    ns.resume();
  4. 4 }

  5. 6 function onPauseHandler(evt:MouseEvent):void
  6. 7 {
  7. 8    ns.pause();
  8. 9 }
  9. 10 
  10. 11 function onStopHandler(evt:MouseEvent):void
  11. 12 {
  12. 13    ns.close();
  13. 14 }
  14. 15 
  15. 16 function onReplayHandler(evt:MouseEvent):void
  16. 17 {
  17. 18    ns.close();
  18. 19    playStream();
  19. 20 }
复制代码
一切搞定 ,可以按下Ctrl+Enter 测试 了,看到了flash已经成功的加载到了fms上的视频文件(.flv)。打开FMS管理控制台就会看到,在应用"PlayStreams"下有一个NetStream的连接,代表当前应用有一个网络流正在传输,如下图:

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


完整示例代码
  1. 1import flash.display.*;
  2. 2import flash.events.*;
  3. 3import flash.net.*;
  4. 4import fl.controls.*;
  5. 5
  6. 6var nc:NetConnection = new NetConnection();
  7. 7var ns:NetStream;
  8. 8var video:Video;
  9. 9
  10. 10var btnPlay:Button=new Button();
  11. 11btnPlay.x=10;
  12. 12btnPlay.y=250;
  13. 13btnPlay.width=50;
  14. 14btnPlay.label="播放";
  15. 15btnPlay.addEventListener(MouseEvent.CLICK,onPlayHandler);
  16. 16addChild(btnPlay);
  17. 17
  18. 18var btnPause:Button=new Button();
  19. 19btnPause.x=80;
  20. 20btnPause.y=250;
  21. 21btnPause.width=50;
  22. 22btnPause.label="暂停";
  23. 23btnPause.addEventListener(MouseEvent.CLICK,onPauseHandler);
  24. 24addChild(btnPause);
  25. 25
  26. 26var btnStop:Button=new Button();
  27. 27btnStop.x=150;
  28. 28btnStop.y=250;
  29. 29btnStop.width=50;
  30. 30btnStop.label="停止";
  31. 31btnStop.addEventListener(MouseEvent.CLICK,onStopHandler);
  32. 32addChild(btnStop);
  33. 33
  34. 34var btnReplay:Button=new Button();
  35. 35btnReplay.x=220;
  36. 36btnReplay.y=250;
  37. 37btnReplay.width=80;
  38. 38btnReplay.label="重新播放";
  39. 39btnReplay.addEventListener(MouseEvent.CLICK,onReplayHandler);
  40. 40addChild(btnReplay);
  41. 41
  42. 42nc.connect("rtmp://192.168.1.103/PlayStreams");
  43. 43nc.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);
  44. 44
  45. 45function onStatusHandler(evt:NetStatusEvent):void
  46. 46{
  47. 47    trace(evt.info.code);
  48. 48    if(evt.info.code=="NetConnection.Connect.Success")
  49. 49    {
  50. 50        playStream();
  51. 51    }
  52. 52}
  53. 53
  54. 54function playStream():void
  55. 55{
  56. 56    ns=new NetStream(nc);
  57. 57    ns.addEventListener(NetStatusEvent.NET_STATUS,onStatusHandler);
  58. 58    ns.client=new CustomClient();
  59. 59    video=new Video();
  60. 60    video.attachNetStream(ns);
  61. 61    ns.play("2009031302",0);
  62. 62    addChild(video);
  63. 63}
  64. 64
  65. 65function onPlayHandler(evt:MouseEvent):void
  66. 66{
  67. 67    ns.resume();
  68. 68}
  69. 69
  70. 70function onPauseHandler(evt:MouseEvent):void
  71. 71{
  72. 72    ns.pause();
  73. 73}
  74. 74
  75. 75function onStopHandler(evt:MouseEvent):void
  76. 76{
  77. 77    ns.close();
  78. 78}
  79. 79
  80. 80function onReplayHandler(evt:MouseEvent):void
  81. 81{
  82. 82    ns.close();
  83. 83    playStream();
  84. 84}
  85. 85
  86. 86
复制代码
如果在Flex环境下开发,更方便实现,详细本文就不做介绍了,核心代码和Flash里开发是一样的。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值