《流媒体播放器设计说明》由会员分享，可在线阅读，更多相关《流媒体播放器设计说明（11页珍藏版）》请在金锄头文库上搜索。
1、流媒体播放器设计说明及开发文档李和平2010-11-01目录1流媒体视频简介21.1什么是流媒体21.2什么是视频流21.3流媒体视频的优点31.4流媒体视频应用32功能概述32.1设计目的32.2功能说明32.3运行环境33功能设计33.1相关变量属性43.2初始化视频画布43.3加载视频流并播放43.4播放进度及缓冲进度高亮显示63.5视频的播放与暂停73.6拖动滑块播放视频73.7音量大小控制83.8全屏控制93.9流数据字符格式化93.10视频画面平滑优化处理101 流媒体视频简介1.1 什么是流媒体所谓流媒体是指采用流式传输方式在Internet上播放的媒体格式(扩展名一般为.flv
2、,目 前Adobe公司为迎接高清时代又推出了.f4v格式)。流媒体又称流式媒体，是指用一个视频 传输服务器把把节目当成数据包发出,传送到网络上,同过流媒体播放器进行画面还原显示 给用户观看。1.2 什么是视频流视频流(Video Streaming)是指视频数据的传输，例如，它能够被作为一个稳定的和连 续的流通过网络处理。因为流动，客户机浏览器或插件能够在整个文件被传输完成前显示多 媒体数据。视频流技术基于 2 密钥技术，视频译码技术和可升级的视频分发技术发展。1.3 流媒体视频的优点流媒体视频是边下载边播放边缓冲的，用户体验相比传统的下载播放好得多，传统的下 载播放是用户等视频文件全部下载到
3、缓存后再进行播放，用户等待时间比较长，因此与单纯 的下载播放方式相比，这种对多媒体文件边下载边播放的流式传输方式不仅使启动延时大幅 度地缩短，而且对系统缓存容量的需求也大大降低。1.4 流媒体视频应用由于流媒体格式的数据传输速度快，因此被广泛应用于互联网上的大型视频点播网站， 比较典型的视频点播网站又56 视频网，优酷视频网、土豆视频网等。同时这种技术也可以 用于在线视频教学系统进行点播学习或公司内部会议视频在线提供观看等。2 功能概述2.1 设计目的作为系统平台功能的扩充，开发此模块，现实一个功能相对全面的流媒体播放器 主要用于播放流媒体格式的视频，提供给特殊要求的客户用于外网在线播放新闻视
4、频。2.2 功能说明1) 视频的暂停、播放2) 视频拖动播放和定点播放3) 音量的禁音和开启4) 拖动滑块控制音量5) 视频缓冲进度高亮显示6) 视频全屏处理，点击按钮或点击视频画面实现全屏2.3 运行环境此模块采用Flex4.0开发，要求客户端安装flash 10.0.0 (含以上版本)3 功能设计3.1 相关变量属性private private private private private private private private privateprivatevar isPause:Boolean = false;var isSound:Boolean = true;var _v
5、olume :Number = 0.6;var isFullScreen:Boolean = false;var totalTime:Number;var playPosition:Number;var videoUrl:String;var videoWidth:Number;var videoHeight:Number;var isAutoPlay:Boolean = true;/暂停状态/声音状态（是否禁音）/默认音量大小（最大值为1）/是否是全屏/播放总时间/剪辑位置/视频文件地址/视频宽度/视频高度/是否自动播放3.2 初始化视频画布点开视频播放页面后首先初始化视频播放的画面，根据接
6、收的用户参数初始化视频画面的 大小。对象定义：import mx. events.SliderEvent; /滑块事件命名空间引用private private private privatevar var var varnc:NetConnection; /媒体连接对象 ns:NetStream;/网络流对象metaDataObj:Object = ; /媒体的元数据信息 video:Video ;/视频对象初始化方法如下：function init():voidvideoUrl = parameters.videoUrl; videoWidth = parameters.videoWidt
7、h; videoHeight = parameters.videoHeight video = new Video(videoWidth,videoHeight);晰度video.smoo thing = true;/画面平滑处理，去掉全屏后的水纹以提高画面清uic.addChild(video); /将视频对象添加到页面3.3 加载视频流并播放当视频初始化完成后调用视频播放方法，将方法置于应用程序事件头里面。function startVideo():voidnc = new NetConnection(); nc.addEventListener(NetStatusEvent.NET_ST
8、ATUS,netStatusHandler);/添加播放连接监听事件nc.connect (null);当连接对象成功连接后，播放视频，上面的nc.connec t(null );表示如果未使用Flash Media Server,可使用null作为参数以便从本地文件系统或Web服务器中播放视频和MP3文件。function netStatusHandler(e:NetStatusEvent):voidns = new NetStream(nc);metaDataObj.onMetaData = this.onMetaData;ns.client = metaDataObj;video.att
9、achNetStream(ns);/ns.bufferTime = 5;ns.play(videoUrl);soundProcess.value = _volume;soundTrans.volume = _volume ns.soundTransform = soundTrans;/添加this.addEventListener(Event.ENTER_FRAME,EnterFrameHandler) 播放过程中的监听事件ns.addEventListener(NetStatusEvent.NET_STATUS,NetStreamStatusHandler); /添加播 放完毕(或其它状态)
10、后的监听事件if(!isAutoPlay) /客户端没有设置为自动播放时的处理 ns.pause();btnPlay.source = playClass;isPause = true;elsebtnPlay.source = pauseClass; isPause = false;/获取视频的元数据信息private function onMetaData (obj:Object) :void totalTime = obj.duration;fileSize = (obj.filesize/(1024*1024).toFixed(2).toString()+MB;/换算成兆字节并保留两位小
11、数说明：this.addEventListener(Event.ENTER_FRAME,EnterFrameHandler); 用于监听播放过程中的事 件处理，由于在播放过程中，播放进度和缓冲进度要实时显示以及播放到哪一个时间点了也都需 要动态实时呈现给用户，因此视频进入加载画面时就需要实时不断监控该事件。ns.addEventListener(NetStatusEvent.NET_STATUS,NetStreamStatusHandler); 用于监听在 视频流播放完毕后的事件处理。onMetaData 是一个回调方法，当客户端加载到视频流时，通过异步获取该媒体的元数据信息， 如媒体总大小、
12、总的播放时间、采样率等等。3.4 播放进度及缓冲进度高亮显示/播放进度和缓冲进度处理private function EnterFrameHandler(e:Event):voidif (totalTime0)playTime = ns.time;/ ns.time 为流媒体实时播放的时间if (ns.bytesLoaded0)bufferRect.width = ns.bytesLoaded /ns.bytesTotal*(playProcess.widthTO); /计算缓冲方框的宽度滑块本身也有一定的宽度减 去约10个像素宽度)说明：playTime作为播放进度条当前实时播放的时间点，视
13、频的总时间作为播放显示进度条的 最大值。mx:HSlider id=playProcessminimum=0value=playTimemaximum=totalTime ns.bytesLoaded 为已缓冲好的流媒体字节大小(单位为 byte)，ns.bytesTotal 为流媒体的 总大小，通过比例计算(如上)可以得出缓冲进度在播放进度条上的位置，缓冲进度条其实是一 个长方形框，以层的形式位于播放进度条下放，初始宽度为 0,当缓冲达到 100%时，即缓冲完毕 时，缓冲条的长度和播放进度条等长(除去滑块宽度)。缓冲方框可以是一个 BorderContainer， 如下：3.5 视频的播放与暂停视频的暂停与播放调用视频流的pause()方法和resume ()方法，通过是否暂停的状态 变量判断控制，代码片段如下：/播放、暂停设置private function play():voidif(isPause)ns.resume();btnPlay.source = pauseClass; /设置按钮图标为点击暂停图标 isPause = false;elsens.pause();btnPlay.source = playClass; /设置按钮图标为点击播放图标 isPause = true;3.6 拖动滑块播放视
