嵌入式Web視頻點播系統完成方法

近年來，視頻點播VOD（Video on Demand）的名字在媒體上出現得越來越多。VOD技術使人們可以根據自己的興趣，不用借助錄像機、影碟機、有線電視而在電腦或電視上自由地點播節目庫中的視頻節目和信息，是可以對視頻節目內容進行自由選擇的交互式系統。
VOD的本質是信息的使用者根據自己的需求主動獲得多媒體信息，它區別于信息發布的最大不同:一是主動性、二是選擇性。從某種意義上說這是信息的接受者根據自身需要進行自我完善和自我發展的方式，這種方式在當今的信息社會中將越來越符合信息資源消費者的深層需要，可以說VOD是信息獲取的未來主流方式在多媒體視音頻方面的表現。VOD的概念將會在信息獲取的領域快速擴展,具有無限廣闊的發展前景。

【背景】

筆者所在的單位建設有一個內部網站，為了進一步提高網絡的可用性，完善網站的功能，決定在網絡上提供視頻點播功能。經過一段時間的摸索和比較，筆者最后選擇了RealSystem公司的RealPlayer作為視頻文件的播放工具，主要基于以下幾點考慮：

1、 RealPlayer 支持當今絕大多數的音視頻流媒體格式，包括當前流行的MP3等音頻媒質；

2、 RealPlayer 默認的.rm格式在保證播放質量的同時，文件壓縮比高，使其更利于網絡傳輸；

3、 RealPlayer在Internet上擁有廣泛的用戶群和服務商支持。

可供選擇的還有Microsoft的MediaPlayer、APPLE 的QuickTime等。具體請參看“搜新網”評測文章：《三大主流流媒體技術對比》（http://www.souxin.com/stream/txt/3_stream_comp/www.souxin.com.htm）

【播放方式的選擇】

一般而言，安裝好RealPlayer之后，有兩種方式可供選擇來連接視頻文件。一種是直接在Web頁面上提供視頻文件的URL地址，當用戶點擊鏈接時，RealPlayer自動識別并實時連接進行播放；第二種方法是通過ActiveX控件方式在Web頁面中嵌入RealPlayer對象，并通過DHTML為內嵌對象動態指定視頻流URL，從而為視頻播放提供了一個統一的友好界面。

前一種方法對于設計者來說相對比較簡單，只需要提供視頻文件的播放路徑。RealPlayer的熟練用戶，還可以通過自定義RealPlayer的播放方式、下載視覺插件、添加到收藏夾等方式進行視頻管理。但這種方式也存在以下幾點缺陷：

1、對于含有中文路徑和中文名的視頻文件，瀏覽器并不能很好支持，常常出現找不到文件等錯誤信息。

2、需要系統進行文件關聯，如果文件關聯出錯，瀏覽器將無所適從。

3、對終端用戶來說，往往希望看到統一的播放界面，而不是彈出式播放。

通過Web嵌入式視頻流管理，可以把用戶端的操作請求減少到最�。ㄓ脩糁恍韬唵蔚陌惭bRealPlayer播放器）。如果再輔以精心的美工設計，還可以按照設計者的意愿定制出精美大方的播放界面。

【基本概念】

在進行設計之前，我們先來了解一些相關的基本概念。

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的視頻點播的基本功能。但我們要想把功能做的更完美一些，還需要其它更復雜的考慮。如流媒體的制作、網頁美工的設計、網絡流速的考慮，以及網站視頻文件的有效組織。這些話題已經超出了本文的討論范圍，請讀者自行參考相關資料。