视频播放器这个做开发的兄弟们应该都熟悉,现在的视听网站这么火热,流媒体技术也相当成熟,网上的介绍也很多。不过基本上流媒体播放器都是flash,大多是写AactionScript脚本开发,利用FLEX开发也比较方便,和VS.NET的开发环境一样,看起来也熟悉,开发起来也有感觉些,我想至少应该比写AS脚本要有感觉些,当然FLEX开发的应用程序最终也会被解析成AS脚本,生成SWF文件,供WEB页面嵌入调用。最近稍微空闲那么一点,从同事那拷了个FLEX4.0,装上感觉下,之前也有意想做个流媒体播放器,正好这段时间有研究下。严格来说单纯的播放器不会难做,网上也有很多例子,只是流媒体播放器只支持流格式的媒体文件,所有这里还有个媒体格式转换的问题,就是要把不同类型的视频格式转换成流格式的文件,即转换成视频流格式。我写的这篇暂时只说说流媒体播放器的开发,不涉及转换的问题,这个有时间研究下再说说。
利用FLEX开发视频播放器可以利用自带的组件VideoDisplay,也可以不用,最终两种方式开发出来的效果是可以一样的。我下面说的主要是不利用组件的开发方式,利用组件开发的后面我也贴下代码片段和截图。主要以开发完后的开发文档内容来说下,写的内容不多,基本上要点应该还是写清楚了,先看下目录,按目录顺序讲解:
1 流媒体视频简介
1.1 什么是流媒体
所谓流媒体是指采用流式传输方式在Internet上播放的媒体格式(扩展名一般为.flv,目前 Adobe公司为迎接高清时代又推出了.f4v格式)。流媒体又称流式媒体,是指用一个视频传输服务器把把节目当成数据包发出,传送到网络上,同过流媒体播放器进行画面还原显示给用户观看。
1.2 什么是视频流
视频流(Video Streaming)是指视频数据的传输,例如,它能够被作为一个稳定的和连续的流通过网络处理。因为流动,客户机浏览器或插件能够在整个文件被传输完成前显示多媒体数据。视频流技术基于 2 密钥技术,视频译码技术和可升级的视频分发技术发展。
1.3 流媒体视频的
优点
流媒体视频是边下载边播放边缓冲的,用户体验相比传统的下载播放好得多,传统的下载播放是用户等视频文件全部下载到缓存后再进行播放,用户等待时间比较长,因此与单纯的下载播放方式相比,这种对多媒体文件边下载边播放的流式传输方式不仅使启动延时大幅度地缩短,而且对系统缓存容量的需求也大大降低。
1.4 流媒体视频应用
由于流媒体格式的数据传输速度快,因此被广泛应用于互联网上的大型视频点播网站,比较典型的视频点播网站又56视频网,优酷视频网、土豆视频网等。同时这种技术也可以用于在线视频教学系统进行点播学习或公司内部会议视频在线提供观看等。
补充说明下那个高清格式的.f4v,因为测试的时候从土豆上拉了个高清格式的视频文件下来,发现后缀是.f4v的,利用开发的这个播放器播放不了,后缀名改成flv是可以播放的,觉得奇怪,都是流格式应该是可以播放的才对,原来忘了在网站的http头文件的MIME类型添加扩展名,添加下.f4v的扩展名就OK了,可以正常播放了,后来也看了下百度百科对这种高清格式是这么说的:
作为一种更小更清晰,更利于在网络传播的格式,F4V已经逐渐取代了传统FLV,也已经被大多数主流播放器兼容播放,而不需要通过转换等复杂的方式。
F4V是Adobe公司为了迎接高清时代而推出继FLV格式后的支持H.264的F4V流媒体格式。
它和FLV主要的区别在于,FLV格式采用的是H263编码,而F4V则支持H.264编码的高清晰视频,码率最高可达50Mbps。
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; //视频宽度