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

【基本概念】

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

　　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官方网站http://service.real.com/help/library/guides/production/htmfiles/control.htm。

　　这里的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＞，其中，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官方网站http://service.real.com/help/library/guides/extend/embed.htm。

　　我们假设有一个视频文件，其URL为http://YourURL/filename.ram，那么我们就可以这样定义：

　　＜a href="JavaScript:play('http://YourURL/filename.ram')"＞文件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的视频点播的基本功能。但我们要想把功能做的更完美一些，还需要其它更复杂的考虑。如流媒体的制作、网页美工的设计、网络流速的考虑，以及网站视频文件的有效组织。这些话题已经超出了本文的讨论范围，请读者自行参考相关资料。

查看本文来源