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

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

要实现媒体流文件的播放是非常简单的,只要在FMS服务器上提供好流媒体文件,Flash客户端通过NetConnection连接到 FMS服务器,然后通过NetStream加载就OK。关于怎么连接FMS在本系列的前两篇已有详细介绍,首先得在fms上建立好服务器应用并部署好媒体文件,如下图示:
[img]http://images.cnblogs.com/cnblogs_com/beniao/fms/streamdir.jpg[/img]
下面是在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界面上。如下图示:
[img]http://images.cnblogs.com/cnblogs_com/beniao/fms/playStream.jpg[/img]

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的连接,代表当前应用有一个网络流正在传输,如下图:

[img]http://images.cnblogs.com/cnblogs_com/beniao/fms/streamstatus.jpg[/img]

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();
}


如果在Flex环境下开发,更方便实现,详细本文就不做介绍了,核心代码和Flash里开发是一样的。

转自http://www.cnblogs.com/beniao/archive/2009/03/14/1410969.html
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值