web前端

位置:IT落伍者 >> web前端 >> 浏览文章

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


发布日期:2024年08月01日
 
嵌入式Web视频点播系统实现方法
近年来视频点播VOD(Video on Demand)的名字在媒体上出现得越来越多VOD技术使人们可以根据自己的兴趣不用借助录像机影碟机有线电视而在电脑或电视上自由地点播节目库中的视频节目和信息是可以对视频节目内容进行自由选择的交互式系统

VOD的本质是信息的使用者根据自己的需求主动获得多媒体信息它区别于信息发布的最大不同:一是主动性二是选择性从某种意义上说这是信息的接受者根据自身需要进行自我完善和自我发展的方式这种方式在当今的信息社会中将越来越符合信息资源消费者的深层需要可以说VOD是信息获取的未来主流方式在多媒体视音频方面的表现VOD的概念将会在信息获取的领域快速扩展具有无限广阔的发展前景

【背景】

笔者所在的单位建设有一个内部网站为了进一步提高网络的可用性完善网站的功能决定在网络上提供视频点播功能经过一段时间的摸索和比较笔者最后选择了RealSystem公司的RealPlayer作为视频文件的播放工具主要基于以下几点考虑

RealPlayer 支持当今绝大多数的音视频流媒体格式包括当前流行的MP等音频媒质

RealPlayer 默认的rm格式在保证播放质量的同时文件压缩比高使其更利于网络传输

RealPlayer在Internet上拥有广泛的用户群和服务商支持

可供选择的还有Microsoft的MediaPlayerAPPLE 的QuickTime等具体请参看搜新网评测文章《三大主流流媒体技术对比》(_stream_comp/)

【播放方式的选择】

一般而言安装好RealPlayer之后有两种方式可供选择来连接视频文件一种是直接在Web页面上提供视频文件的URL地址当用户点击链接时RealPlayer自动识别并实时连接进行播放第二种方法是通过ActiveX控件方式在Web页面中嵌入RealPlayer对象并通过DHTML为内嵌对象动态指定视频流URL从而为视频播放提供了一个统一的友好界面

前一种方法对于设计者来说相对比较简单只需要提供视频文件的播放路径RealPlayer的熟练用户还可以通过自定义RealPlayer的播放方式下载视觉插件添加到收藏夹等方式进行视频管理但这种方式也存在以下几点缺陷

对于含有中文路径和中文名的视频文件浏览器并不能很好支持常常出现找不到文件等错误信息

需要系统进行文件关联如果文件关联出错浏览器将无所适从

对终端用户来说往往希望看到统一的播放界面而不是弹出式播放

通过Web嵌入式视频流管理可以把用户端的操作请求减少到最小(用户只需简单的安装RealPlayer播放器)如果再辅以精心的美工设计还可以按照设计者的意愿定制出精美大方的播放界面

【基本概念】

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

<object><embed>标签

<object>是Microsoft在IE之后推出的用来替代<embed>标签的对象定义标签(IE仍然支持<embed>)通过classid属性定义相应的对象类型<embed>标签是Netscape浏览器支持的对象定义标签如果开发者需要同时获得IE和NetScape两种浏览器用户的支持最好使用<embed>标签

定义ram文件

ram格式文件同rm文件一样也是RealPlayer所支持的视频文件压缩格式所不同的是ram文件可以仅简单的包括视频文件的URL地址也就是说ram文件可以为简单的文本格式每一行定义一个视频文件的URL地址

笔者在测试时发现嵌入式RealPlayer在播放视频文件时一般采用把视频文件整个下载到本地然后进行播放这对于较大的视频文件来说速度让人难以忍受解决这个问题的方法一是把视频文件简单的分割成大小适中的小文件分段播放(由于 REAL 公司对 RM 格式的实行封闭管理所以 RM 到目前为止还不能像 MPEG 等视频文件一样用视频软件自由的编辑)另外一种就是采用ram文件RealPlayer简单的下载文本格式的ram文件然后取出其中的真实地址然后自动连接到网络进行实时的点对点播放其缺点是增加了服务器负担

类似的Microsoft Media Player采用asx格式来定义asf文件

DHTML

DHTML是Dynamic HTML的缩写DHTML通过传统的HTML语言利用CSS(Cascading Style Sheets即样式表)并依靠JavaScript使一向静止不变的页面得以起来 Netscape 和IE /版本支持DHTMLDHTML是一种完全客户端技术直接通过WEB页面实现页面与用户之间的交互性DHTML的优秀之处在于增强了Web页面的功能在Web页面直接建立动画游戏和应用软件等等提供了浏览站点的全新方式与JavaFlash等技术不同的是用DHTML编制的页面不需要插件的支持就能完整的实现

【设计过程】

下面笔者以IE为例说明一个嵌入式WEB视频点播系统的实现方法其中用到了部分PHP和JavaScript技术有疑惑的读者请参考相关资料

插入RealPlayer ActiveX对象(如果要进行测试需要先安装RealPlayer播放器)

假定以下代码包含在videophp文档中(该文件将在主页面中通过<iframe>进行链接)

<object width= height= classid=clsid:CFCDAABEcfBBAFBBCCFA>

<param name=CONTROLS value=ImageWindow>

<param name=CONSOLE value=Video>

<param name=CENTER value=TRUE>

<param name=MAINTAINSPECT value=TRUE>

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

<object width= height= classid=clsid:CFCDAABEcfBBAFBBCCFA>

<param name=CONTROLS value=StatusBar>

<param name=CONSOLE value=Video>

</object> //定义状态栏

<object width= height= classid=clsid:CFCDAABEcfBBAFBBCCFA>

<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=>

<param name=LOOP value=>

<param name=NUMLOOP value=>

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

其中CONTROLS参数用来指定播放器的控件外观可以用多个控件进行组合并通过CONSOLE参数进行关联

有关param参数读者可以参阅RealPlayer官方网站

这里的SRC参数尤为重要用来指定视频流文件的URL地址这里笔者使用PHP代码的方法动态的指定SRC读者也可以使用其它如ASP或完全通过 JavaScript 实现

使用DHTML动态控制RealPlayer控件的播放

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

以下代码包含在主页面中

<IFRAME id=iVideo SRC=videophp Width= Height= frameborder= SCROLLING=no>

</IFRAME>其中videophp文件用力显示RealPlayer控件

下面我们加入简单的JavaScript 代码用来控制视频的播放

<script language=JavaScript>

function play(filename){

topdocumentall(iVideo)src = videophp?src=+filename;

} // iVideo 是刚刚定义的IFRAME 的标识符

</script>

我们可以使用javascript控制RealPlayer插件更复杂的功能如提取视频的长宽测试用户的网络速率自定义播放事件等等关于RealPlayer ActiveX开发的具体细节请参阅RealPlayer官方网站

我们假设有一个视频文件其URL为那么我们就可以这样定义

<a JavaScript:play()>文件</a>如果文件是在本地URL也可以为相对路径

检测用户是否安装RealPlayer播放器

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

<SCRIPT LANGUAGE=JavaScript>

<!

var RealMode=;

var RealPlayer=;

var RealPlayer=;

var RealPlayerG=;

if (navigatoruserAgentindexOf(MSIE)< ){

numPlugins = navigatorpluginslength;

for (i = ; i < numPlugins; i++){

plugin = navigatorplugins[i];

if (pluginnamesubstring()==RealPlayer){

RealMode=;

}

}

}

// 以下代码通过VBScript的CreateObject()函数动态的创建RealPlayer对象

documentwrite(<SCRIPT LANGUAGE=VBScript\> \n);

documentwrite(on error resume next \n);

documentwrite(RealPlayerG = (NOT IsNull(CreateObject(rmocxRealPlayer G Control)))\n);

documentwrite(RealPlayer = (NOT IsNull(CreateObject(RealPlayerRealPlayer(tm) ActiveX Control (bit))))\n);

documentwrite(RealPlayer = (NOT IsNull(CreateObject(RealVideoRealVideo(tm) ActiveX Control (bit))))\n);

documentwrite(</SCRIPT\> \n);

if ( RealPlayerG || RealPlayer || RealPlayer ){

//可以在此处添加<object>对象

}else if ( RealMode ){ // NetScape浏览器用户

// 可以在此处加入<embed>对象

}else{

windowlocationreplace(); // 转入页面指导用户进行安装

}

>

</Script>

至此我们已经实现了一个基于Web的视频点播的基本功能但我们要想把功能做的更完美一些还需要其它更复杂的考虑如流媒体的制作网页美工的设计网络流速的考虑以及网站视频文件的有效组织这些话题已经超出了本文的讨论范围请读者自行参考相关资料               

上一篇:使用JMS接口接入WebSphere MQ消息

下一篇:实现Web页面上的右键快捷菜单