嵌入式Web视频点播系统实现方式

关键字 realplayer，嵌入式、流媒体，网络存储，php，dhtml，activex

近年来，视频点播vod（video on demand）的名字在外媒上发生得愈发越多。vod技术使他们可以按照自己的兴趣，不用借助录像机、影碟机、有线电视而在手机或电视上自由地点播节目库中的视频栏目和信息，是可以对视频节目内容进行自由选择的交互式系统。

vod的本质是信息的使用者根据自己的意愿主动获取多媒体信息，它区分于信息公布的最大不同:一是主动性、二是选择性。从某些意义上说这是信息的接受者根据自身必须进行自我构建和自我演进的方法，这种模式在当下的信息社会中将越来越符合信息资源消费者的深层需要，可以说vod是信息获得的今后主流模式在多媒体视音频方面的体现。vod的概念即将在信息获得的领域迅速扩充,具有无限广阔的演进前景。

【背景】

笔者所在的单位建设有一个内部网站，为了进一步提升网络的可用性，完善网站的功能，决定在网路上提供视频点播功能。经过一段时间的探索和非常，笔者最终选取了realsystem公司的realplayer作为视频文件的播放软件，主要基于以上几点考虑：

1、 realplayer 支持当下绝大多数的音视频流媒体格式，包括当前流行的mp3等音频媒质；

2、 realplayer 默认的.rm格式在确保播放品质的同时，文件压缩比高，使其更便于网络传输；

3、 realplayer在internet上拥有广泛的用户群和服务商支持。

可供选择的也有microsoft的mediaplayer、apple 的quicktime等。具体请详见“搜新网”评测文章：《三大主流流媒体技术对比》（）

【播放方式的选取】

一般而言，安装好realplayer之后，有两种方法可供选择来连接视频文件。一种是直接在web页面上提供视频文件的url地址，当客户点击链接时realplayer插件，realplayer自动甄别并即时连接进行播放；第二种方法是借助activex控件方式在web页面中嵌入realplayer对象，并借助dhtml为内置对象动态指定视频流url，从而为视频播放提供了一个统一的友好界面。

前一种方法针对设计者来说相对非常简洁，只应该提供视频文件的播放模式。realplayer的熟练用户，还可以借助自定义realplayer的播放模式、下载视觉软件、添加到收藏夹等形式进行视频管控。但这样方法也存在下列几点缺陷：

1、对于带有英文模式和中文名的视频文件，浏览器并不能很好支持，常常发生找不到文件等出错信息。

2、需要平台进行文件关联，如果文件关联错误，浏览器将无所适从。

3、对终端客户来说，往往期望看见统一的播放图标，而不是弹出式播放。

通过web嵌入式视频流管理，可以把客户端的操作请求增加到最小（用户只需简单的调试realplayer播放器）。如果再采用精心的美工设计，还可以根据设计者的需求订制出精致大方的播放界面。

【基本概念】

在进行设计之前，我们先来认识一些相关的基本概念。

1、<object>、<embed>标签

<object>是microsoft在ie4.0之后打造的，用来代替<embed>标签的对象定义标签(ie一直支持<embed>)，通过classid属性定义相应的对象类别。<embed>标签是netscape浏览器支持的对象定义标签。如果开发者需要同时获取ie和netscape两种浏览器用户的支持，最好使用<embed>标签。

2、定义ram文件

ram格式文件同rm文件一样，也是realplayer所支持的视频文件压缩格式，所不同的是ram文件可以仅简单的比如视频文件的url地址。也就是说，ram文件可以为简洁的文本格式，每一行定义一个视频文件的url地址。

笔者在测试时看到，嵌入式realplayer在播放视频文件时，一般采取把视频文件整个下载到本地然后进行播放。这针对较大的视频文件来说，速度让人难以忍受。解决这个难题的方式，一是把视频文件简单的分割成大小适中的小文件分段播放（由于 real 公司对 rm 格式的推行“封闭管理”，所以 rm 到现在为止还不能像 mpeg 等视频文件一样用视频工具自由的编辑）；另外一种就是采用ram文件。realplayer简单的下载文本格式的ram文件，然后取出其中的真实地址，然后手动连接到网络进行即时的点对点播放。其特点是提高了服务器负担。

类似的，microsoft media player采用asx格式来定义asf文件。

3、dhtml

dhtml是dynamic html的简写，dhtml通过传统的html语言，利用css（cascading style sheets，即样式表），并借助javascript使一向静止不变的页面得以“动”起来。 netscape 4.0和ie 4.0/5.0版本支持dhtml，dhtml是一种完全“客户端”技术，直接借助web页面实现页面与客户之间的交互性。dhtml的优秀之处在于提高了web页面的功能，在web页面直接创建、游戏和应用工具之类，提供了浏览站点的全新模式，与java、flash等科技不同的是，用dhtml编制的页面不需要插件的支持才能完整的推动。

【设计过程】

下面笔者以ie5.0为例，说明一个嵌入式web视频点播平台的推动方式，其中用到了个别php和javascript技术，有疑问的读者请参考相关资料。

一、插入realplayer activex对象（如果要进行检测，需要先安装realplayer播放器）

假定以下代码包括在video.php文档中（该文件将在主页面中借助<iframe>进行链接）。

<object width="320" height="250" classid="clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa">

<param name="controls" value="imagewindow">

<param name="console" value="video">

<param name="center" value="true">

<param name="maintainspect" value="true">

</object> //定义播放界面

<object width="320" height="30" classid="clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa">

<param name="controls" value="statusbar">

<param name="console" value="video">

</object> //定义状态栏

<object width="320" height="30" classid="clsid:cfcdaa03-8be4-11cf-b84b-0020afbbccfa">

<param name="controls" value="controlpanel">

<param name="console" value="video">

<param name="src" value="<?php echo getsrc(); ?>">

<param name="autostart" value="true">

<param name="prefetch" value="0">

<param name="loop" value="0">

<param name="numloop" value="0">

</object> //定义控制面板

其中，controls参数用来指定播放器的控件外观，可以用多个控件进行组合，并借助console参数进行关联。

有关param参数，读者可以参看realplayer官方网页。

这里的src参数尤为重要，用来选定视频流文件的url地址。这里笔者使用php代码的方式动态的指定src，读者也可以使用其他如asp，或完全借助 javascript 实现。

二、使用dhtml动态控制realplayer控件的播放

小技巧：<iframe>的妙用。由于为realplayer控件指定新的src需要刷新页面，使用<iframe>可以把realplayer控件嵌入到单独的页面中，这样，动态刷新就是在<iframe>内进行，不会影响用户观看页面其他内容。

以下代码包括在主页面中：

<iframe id="ivideo" src="video.php" width=500 height=345 frameborder=0 scrolling="no">

</iframe>realplayer插件，其中，video.php文件用力显示realplayer控件。

下面我们加入简单的javascript 代码拿来控制视频的播放。

<script language="javascript">

function play(filename){

top.document.all("ivideo").src = "video.php?src="+filename;

} // ivideo 是刚刚定义的iframe 的标识符

</script>

我们可以使用javascript控制realplayer插件更复杂的用途，如提取视频的长宽、测试用户的网络速度、自定义播放事件之类。关于realplayer activex开发的详细细节，请参看realplayer官方网页。

我们假如有一个视频文件，其url为，那么我们就可以这么定义：

<a href="javascript:play()">文件1</a>，如果文件是在本地，url也可以为相对模式。

三、检测用户是否安装realplayer播放器

在页面的<head></head>部分加入下面javascript代码，用以检测用户是否安装realplayer播放器：

<script language=javascript>

<!–

var realmode=0;

var realplayer5=0;

var realplayer4=0;

var realplayerg2=0;

if (navigator.useragent.indexof("msie")< 0 ){

numplugins = navigator.plugins.length;

for (i = 0; i < numplugins; i++){

plugin = navigator.plugins[i];

if (plugin.name.substring(0,10)=="realplayer"){

realmode=1;

}

}

}

// 以下代码通过vbscript的createobject()函数动态的构建realplayer对象

document.write(<script language=vbscript\> \n);

document.write(on error resume next \n);

document.write(realplayerg2 = (not isnull(createobject("rmocx.realplayer g2 control")))\n);

document.write(realplayer5 = (not isnull(createobject("realplayer.realplayer(tm) activex control (32-bit)")))\n);

document.write(realplayer4 = (not isnull(createobject("realvideo.realvideo(tm) activex control (32-bit)")))\n);

document.write(</script\> \n);

if ( realplayerg2 || realplayer5 || realplayer4 ){

//可以在这里添加<object>对象

}else if ( realmode ){ // netscape浏览器用户

// 可以在这里加入<embed>对象

}else{

window.location.replace("install.htm"); // 转入install.htm页面指导用户进行安装

}

–>

</script>

至此，我们终于实现了一个基于web的视频点播的基本功能。但我们要想把功能做的更完美一些，还必须其它更复杂的考量。如流媒体的制作、网页美工的设计、网络速度的考量，以及网站视频文件的有效组织。这些话题即将超过了本文的探讨范围，请读者自行参考相关资料。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-120642-1.html