流媒体播放器设计说明

流媒体播放器设计说明

及开发文档

李和平2010-11-01

目录

1

流媒体视频简介....................................................................................................................... 2 1.1 1.2 1.3 1.4 2

什么是流媒体 . .............................................................................................................. 2 什么是视频流 . .............................................................................................................. 2 流媒体视频的优点 . ...................................................................................................... 3 流媒体视频应用 . .......................................................................................................... 3

功能概述................................................................................................................................... 3 2.1 2.2 2.3

设计目的 . ...................................................................................................................... 3 功能说明 . ...................................................................................................................... 3 运行环境 . ...................................................................................................................... 3

3 功能设计................................................................................................................................... 3 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10

相关变量属性 . .............................................................................................................. 4 初始化视频画布 . .......................................................................................................... 4 加载视频流并播放 . ...................................................................................................... 4 播放进度及缓冲进度高亮显示 . .................................................................................. 6 视频的播放与暂停 . ...................................................................................................... 7 拖动滑块播放视频 . ...................................................................................................... 7 音量大小控制 . .............................................................................................................. 8 全屏控制 . ...................................................................................................................... 9 流数据字符格式化 . ...................................................................................................... 9 视频画面平滑优化处理 . ............................................................................................ 10

1 流媒体视频简介

1.1 什么是流媒体

所谓流媒体是指采用流式传输方式在Internet 上播放的媒体格式(扩展名一般为.flv ，目前 Adobe 公司为迎接高清时代又推出了.f4v 格式) 。流媒体又称流式媒体，是指用一个视频传输服务器把把节目当成数据包发出，传送到网络上，同过流媒体播放器进行画面还原显示给用户观看。

1.2 什么是视频流

视频流（Video Streaming）是指视频数据的传输，例如，它能够被作为一个稳定的和连续的流通过网络处理。因为流动，客户机浏览器或插件能够在整个文件被传输完成前显示多媒体数据。视频流技术基于 2 密钥技术，视频译码技术和可升级的视频分发技术发展。

1.3 流媒体视频的优点

流媒体视频是边下载边播放边缓冲的，用户体验相比传统的下载播放好得多，传统的下载播放是用户等视频文件全部下载到缓存后再进行播放，用户等待时间比较长，因此与单纯的下载播放方式相比，这种对多媒体文件边下载边播放的流式传输方式不仅使启动延时大幅度地缩短，而且对系统缓存容量的需求也大大降低。

1.4 流媒体视频应用

由于流媒体格式的数据传输速度快，因此被广泛应用于互联网上的大型视频点播网站，比较典型的视频点播网站又56视频网，优酷视频网、土豆视频网等。同时这种技术也可以用于在线视频教学系统进行点播学习或公司内部会议视频在线提供观看等。

2 功能概述

2.1 设计目的

作为系统平台功能的扩充，开发此模块，现实一个功能相对全面的流媒体播放器，主要用于播放流媒体格式的视频，提供给特殊要求的客户用于外网在线播放新闻视频。

2.2 功能说明

1） 视频的暂停、播放

2） 视频拖动播放和定点播放 3） 音量的禁音和开启 4） 拖动滑块控制音量 5） 视频缓冲进度高亮显示

6） 视频全屏处理，点击按钮或点击视频画面实现全屏

2.3 运行环境

此模块采用Flex4.0开发，要求客户端安装flash 10.0.0 （含以上版本）

3 功能设计

3.1 相关变量属性

private var isPause:Boolean = false ; //暂停状态

private var isSound:Boolean = true ; //声音状态（是否禁音）

private var _volume :Number = 0.6; //默认音量大小(最大值为1) private var isFullScreen:Boolean = false ; //是否是全屏

private var totalTime:Number; //播放总时间 private var playPosition:Number; //剪辑位置 private var videoUrl:String; //视频文件地址 private var videoWidth:Number; //视频宽度

private var videoHeight:Number; //视频高度 private var isAutoPlay:Boolean = true ; //是否自动播放

3.2 初始化视频画布

点开视频播放页面后首先初始化视频播放的画面，根据接收的用户参数初始化视频画面的大小。 对象定义：

import mx.events.SliderEvent; //滑块事件命名空间引用

private var nc:NetConnection; //媒体连接对象 private var ns:NetStream; //网络流对象

private var metaDataObj:Object = {}; //媒体的元数据信息 private var video:Video ;

//视频对象

初始化方法如下：

private function init():void

{

videoUrl = parameters.videoUrl; videoWidth = parameters.videoWidth; videoHeight = parameters.videoHeight

video = new Video(videoWidth,videoHeight);

video.smoothing = true ; //画面平滑处理，去掉全屏后的水纹以提高画面清

晰度

}

uic.addChild(video); //将视频对象添加到页面

3.3 加载视频流并播放

当视频初始化完成后调用视频播放方法，将方法置于应用程序事件头里面。

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955"

minHeight="600" initialize="init()" creationComplete="startVideo()" >

private function startVideo():void

{ }

nc = new NetConnection();

nc.addEventListener(NetStatusEvent.NET_STATUS,netStatusHandler); nc.connect(null );

//添加播放连接监听事件

当连接对象成功连接后，播放视频，上面的nc.connect(null ); 表示如果未使用 Flash Media

Server, 可使用null 作为参数以便从本地文件系统或 Web 服务器中播放视频和 MP3 文件。

{

ns = new NetStream(nc);

metaDataObj.onMetaData = this .onMetaData; ns.client = metaDataObj; video.attachNetStream(ns);

private function netStatusHandler(e:NetStatusEvent):void

//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);//添加播

}

private function onMetaData(obj:Object):void

if (!isAutoPlay) //客户端没有设置为自动播放时的处理 { } else { }

btnPlay.source = pauseClass; isPause = false ; ns.pause();

btnPlay.source = playClass; isPause = true ;

放完毕(或其它状态) 后的监听事件

//获取视频的元数据信息

{ }

totalTime = obj.duration;

fileSize = (obj.filesize/(1024*1024)).toFixed(2).toString()+"MB" ; //

换算成兆字节并保留两位小数

说明：

this .addEventListener(Event.ENTER_FRAME,EnterFrameHandler);用于监听播放过程中的事

件处理，由于在播放过程中，播放进度和缓冲进度要实时显示以及播放到哪一个时间点了也都需要动态实时呈现给用户，因此视频进入加载画面时就需要实时不断监控该事件。

ns.addEventListener(NetStatusEvent.NET_STATUS,NetStreamStatusHandler);用于监听在视频流播放完毕后的事件处理。

onMetaData 是一个回调方法，当客户端加载到视频流时，通过异步获取该媒体的元数据信息，

如媒体总大小、总的播放时间、采样率等等。

3.4 播放进度及缓冲进度高亮显示

//播放进度和缓冲进度处理

private function EnterFrameHandler(e:Event):void {

if (totalTime>0) { }

if (ns.bytesLoaded>0) {

bufferRect.width = ns.bytesLoaded /

playTime = ns.time;// ns.time为流媒体实时播放的时间

ns.bytesTotal*(playProcess.width-10);//计算缓冲方框的宽度(滑块本身也有一定的宽度, 减

去约10个像素宽度)

}

}

说明：

playTime 作为播放进度条当前实时播放的时间点，视频的总时间作为播放显示进度条的最大值。

ns.bytesLoaded 为已缓冲好的流媒体字节大小（单位为byte ），ns.bytesTotal 为流媒体的

总大小，通过比例计算（如上）可以得出缓冲进度在播放进度条上的位置，缓冲进度条其实是一个长方形框，以层的形式位于播放进度条下放，初始宽度为0, 当缓冲达到100%时，即缓冲完毕时，缓冲条的长度和播放进度条等长（除去滑块宽度）。缓冲方框可以是一个BorderContainer ，如下：

3.5 视频的播放与暂停

视频的暂停与播放调用视频流的pause()方法和resume()方法，通过是否暂停的状态变量判断控制，代码片段如下：

//播放、暂停设置

private function play():void { }

if (isPause) { } else { }

ns.pause();

btnPlay.source = playClass; //设置按钮图标为点击播放图标 isPause = true ; ns.resume();

btnPlay.source = pauseClass; //设置按钮图标为点击暂停图标 isPause = false ;

3.6 拖动滑块播放视频

拖动滑块播放视频文件，主要是判断和记录流的剪辑位置，找到最终的剪辑位置后可

以调用视频流的seek(参数) 方法，参数为当前的剪辑位置，如果不拖动直接点击任意剪辑位置定点播放，那么最终的剪辑位置应该是鼠标弹起的位置，这里定点点击实际上还是相当于触发了滑块移动的事件，只不过是滑块快速移动到你点击的位置而已，相关代码片段如下： //拖动进度条时改变播放位置

private function play_onchange(event:SliderEvent):void { }

if (ns.time == 0) { }

playPosition = playProcess.value; //保正播放进度統一 ns.seek(playPosition);

playProcess.value = 0; return ;

//进度条鼠标按下

private function thumbPress():void {

}

//进度条鼠标弹起, 指拖动时滑块时鼠标弹起

private function thumbRelease():void { }

//ns.seek(playPosition); isPause = false ; ns.resume();

btnPlay.source = pauseClass;

3.7 播放结束处理

一般视频播放完毕后，播放的指针头归零，即播放进度条上的滑块指向起始位置，同时播放按钮状态为准备就绪状态，视频流处于暂停状态。可以通过视频流的当前状态信息进行判断，如下面e.info.code 状态值可以获得各种不同的状态，这里只取播放完毕停止后的状态值，代码片段如下： //播放完毕处理

private function NetStreamStatusHandler(e:NetStatusEvent):void { }

if (e.info.code == "NetStream.Play.Stop" ) { }

ns.seek(0);

btnPlay.source = playClass; isPause = true ; ns.pause();

3.8 音量大小控制

视频声音控制通过SoundTransform 类操作，该类包含音量和平移的属性。如果禁音后运行调节滑块的话，需要再定义一个临时变量tmpSound ，以便开启声音时为最终设置的音量。 //静音、开音控制

private function closeSound():void {

if (isSound) {

soundImg.source = sound; tmpSound= ns.soundTransform; soundTrans.volume = 0;

ns.soundTransform = soundTrans; // 这里禁音直接isSound = false ;

ns.soundTransform.volume = 0 这样不行，需要用对象赋值

}else

}

}

soundImg.source = sound1; ns.soundTransform = tmpSound; isSound = true ;

//通过滑块调整声音

private function sound_thumbChanges(event:SliderEvent):void { }

tmpSound.volume = soundProcess.value; ns.soundTransform = tmpSound;

3.9 全屏控制

全屏可以用flash 画布舞台的stage 属性值设置，不过要考虑下普通屏幕和宽屏的处理, 常见的显示器分辨率按其长宽比可分为为：4：3（1024×768）、5：4（1280×1024）、16：9、16：10 (这里暂以宽屏测试的，需要后续处理) ，点击全屏按钮或点击视频画面都可以全屏，调用display()方法即可，代码片段如下： //切換全屏显示

private function display():void { }

if (!isFullScreen) { { }

stage.displayState = StageDisplayState.NORMAL; isFullScreen = false ;

stage.fullScreenSourceRect = new Rectangle(video.x, stage.displayState =StageDisplayState.FULL_SCREEN; isFullScreen = true ;

video.y,video.width,video.height);

}else

3.10 流数据字符格式化

视频播放时当前时间和总时间是以秒为单位的，比如180s 的文件，当前播放到一半显示90s ，需要按时间格式来显示才友好，另外还有音量的值是介于0到1之间的某个值，也需要按百分比来显示。代码片段如下： //格式化时间

private function formatTime(time:Number):String

var min:Number = Math.floor(time/60); var sec:Number = Math.floor(time%60);

var timeResult:String = (min

min.toString()) + ":" + (sec == 10 ? "0" +sec.toString() : sec.toString());

//声音slider 格式化

private function SoundTipFormat(data:Number):String { }

return (data*100).toFixed(0).toString()+"%"; //拖动声音进度条时显

示百分比音量

3.11 视频画面平滑优化处理

一般视频画布全屏后，会产生文字图像有些失真的感觉，会产生水纹，对于这点的处理，Flex 封装了一个简单有效的方法，只需设置一个属性即可，即video 对象中有一个属性设置。如下：

video.smoothing = true ;

把该属性设置为true ，表是启用画面优化处理，加上这个设置能大大提高画面质量 。

3.12 播放接口调用

采用FLEX 开放的播放器编译后最终生成的是一个.swf 文件，需要通过页面去加载调用，可以是静态的html 页面，也可以是动态的aspx 页面，调用过程中引用Flex 内置的一个JS 文件——swfobject.js ，

其中flashContent 标签作为嵌入的swf 播放器文件（ToncentPlayer.swf ）的容器，同时网站的http 头进行如下设置（添加.flv 扩展名）：

11