嵌入式Web視頻點播系統(tǒng)實現(xiàn)方法
加入技術(shù)交流群
近年來，視頻點播VOD（Video on Demand）的名字在媒體上出現(xiàn)得越來越多。VOD技術(shù)使人們可以根據(jù)自己的興趣，不用借助錄像機(jī)、影碟機(jī)、有線電視而在電腦或電視上自由地點播節(jié)目庫中的視頻節(jié)目和信息，是可以對視頻節(jié)目內(nèi)容進(jìn)行自由選擇的交互式系統(tǒng)。
VOD的本質(zhì)是信息的使用者根據(jù)自己的需求主動獲得多媒體信息，它區(qū)別于信息發(fā)布的最大不同:一是主動性、二是選擇性。從某種意義上說這是信息的接受者根據(jù)自身需要進(jìn)行自我完善和自我發(fā)展的方式，這種方式在當(dāng)今的信息社會中將越來越符合信息資源消費者的深層需要，可以說VOD是信息獲取的未來主流方式在多媒體視音頻方面的表現(xiàn)。VOD的概念將會在信息獲取的領(lǐng)域快速擴(kuò)展,具有無限廣闊的發(fā)展前景。
【背景】
筆者所在的單位建設(shè)有一個內(nèi)部網(wǎng)站，為了進(jìn)一步提高網(wǎng)絡(luò)的可用性，完善網(wǎng)站的功能，決定在網(wǎng)絡(luò)上提供視頻點播功能。經(jīng)過一段時間的摸索和比較，筆者最后選擇了RealSystem公司的RealPlayer作為視頻文件的播放工具，主要基于以下幾點考慮：
1、 RealPlayer 支持當(dāng)今絕大多數(shù)的音視頻流媒體格式，包括當(dāng)前流行的MP3等音頻媒質(zhì)；
2、 RealPlayer 默認(rèn)的.rm格式在保證播放質(zhì)量的同時，文件壓縮比高，使其更利于網(wǎng)絡(luò)傳輸；
3、 RealPlayer在Internet上擁有廣泛的用戶群和服務(wù)商支持。
可供選擇的還有Microsoft的MediaPlayer、APPLE 的QuickTime等。具體請參看“搜新網(wǎng)”評測文章：《三大主流流媒體技術(shù)對比》（http://www.souxin.com/stream/txt/3_stream_comp/www.souxin.com.htm）
【播放方式的選擇】
一般而言，安裝好RealPlayer之后，有兩種方式可供選擇來連接視頻文件。一種是直接在Web頁面上提供視頻文件的URL地址，當(dāng)用戶點擊鏈接時，RealPlayer自動識別并實時連接進(jìn)行播放；第二種方法是通過ActiveX控件方式在Web頁面中嵌入RealPlayer對象，并通過DHTML為內(nèi)嵌對象動態(tài)指定視頻流URL，從而為視頻播放提供了一個統(tǒng)一的友好界面。
前一種方法對于設(shè)計者來說相對比較簡單，只需要提供視頻文件的播放路徑。RealPlayer的熟練用戶，還可以通過自定義RealPlayer的播放方式、下載視覺插件、添加到收藏夾等方式進(jìn)行視頻管理。但這種方式也存在以下幾點缺陷：
1、對于含有中文路徑和中文名的視頻文件，瀏覽器并不能很好支持，常常出現(xiàn)找不到文件等錯誤信息。
2、需要系統(tǒng)進(jìn)行文件關(guān)聯(lián)，如果文件關(guān)聯(lián)出錯，瀏覽器將無所適從。
3、對終端用戶來說，往往希望看到統(tǒng)一的播放界面，而不是彈出式播放。
通過Web嵌入式視頻流管理，可以把用戶端的操作請求減少到最?。ㄓ脩糁恍韬唵蔚陌惭bRealPlayer播放器）。如果再輔以精心的美工設(shè)計，還可以按照設(shè)計者的意愿定制出精美大方的播放界面。
【基本概念】
在進(jìn)行設(shè)計之前，我們先來了解一些相關(guān)的基本概念。
1、object>、embed>標(biāo)簽
object>是Microsoft在IE4.0之后推出的，用來替代embed>標(biāo)簽的對象定義標(biāo)簽(IE仍然支持embed>)，通過classid屬性定義相應(yīng)的對象類型。embed>標(biāo)簽是Netscape瀏覽器支持的對象定義標(biāo)簽。如果開發(fā)者需要同時獲得IE和NetScape兩種瀏覽器用戶的支持，最好使用embed>標(biāo)簽。
2、定義ram文件
ram格式文件同rm文件一樣，也是RealPlayer所支持的視頻文件壓縮格式，所不同的是ram文件可以僅簡單的包括視頻文件的URL地址。也就是說，ram文件可以為簡單的文本格式，每一行定義一個視頻文件的URL地址。
筆者在測試時發(fā)現(xiàn)，嵌入式RealPlayer在播放視頻文件時，一般采用把視頻文件整個下載到本地然后進(jìn)行播放。這對于較大的視頻文件來說，速度讓人難以忍受。解決這個問題的方法，一是把視頻文件簡單的分割成大小適中的小文件分段播放（由于 REAL 公司對 RM 格式的實行“封閉管理”，所以 RM 到目前為止還不能像 MPEG 等視頻文件一樣用視頻軟件自由的編輯）；另外一種就是采用ram文件。RealPlayer簡單的下載文本格式的ram文件，然后取出其中的真實地址，然后自動連接到網(wǎng)絡(luò)進(jìn)行實時的點對點播放。其缺點是增加了服務(wù)器負(fù)擔(dān)。
類似的，Microsoft Media Player采用asx格式來定義asf文件。
3、DHTML
DHTML是Dynamic HTML的縮寫，DHTML通過傳統(tǒng)的HTML語言，利用CSS（Cascading Style Sheets，即樣式表），并依靠JavaScript使一向靜止不變的頁面得以“動”起來。 Netscape 4.0和IE 4.0/5.0版本支持DHTML，DHTML是一種完全“客戶端”技術(shù)，直接通過WEB頁面實現(xiàn)頁面與用戶之間的交互性。DHTML的優(yōu)秀之處在于增強(qiáng)了Web頁面的功能，在Web頁面直接建立動畫、游戲和應(yīng)用軟件等等，提供了瀏覽站點的全新方式，與Java、Flash等技術(shù)不同的是，用DHTML編制的頁面不需要插件的支持就能完整的實現(xiàn)。
【設(shè)計過程】
下面筆者以IE5.0為例，說明一個嵌入式WEB視頻點播系統(tǒng)的實現(xiàn)方法，其中用到了部分PHP和JavaScript技術(shù)，有疑惑的讀者請參考相關(guān)資料。
一、插入RealPlayer ActiveX對象（如果要進(jìn)行測試，需要先安裝RealPlayer播放器）
假定以下代碼包含在video.php文檔中（該文件將在主頁面中通過iframe>進(jìn)行鏈接）。
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> //定義狀態(tài)欄
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參數(shù)用來指定播放器的控件外觀，可以用多個控件進(jìn)行組合，并通過CONSOLE參數(shù)進(jìn)行關(guān)聯(lián)。
有關(guān)param參數(shù)，讀者可以參閱RealPlayer官方網(wǎng)站http://service.real.com/help/library/guides/production/htmfiles/control.htm。
這里的SRC參數(shù)尤為重要，用來指定視頻流文件的URL地址。這里筆者使用PHP代碼的方法動態(tài)的指定SRC，讀者也可以使用其它如ASP，或完全通過 JavaScript 實現(xiàn)。
二、使用DHTML動態(tài)控制RealPlayer控件的播放
小技巧：IFRAME>的妙用。由于為RealPlayer控件指定新的SRC需要刷新頁面，使用IFRAME>可以把RealPlayer控件嵌入到單獨的頁面中，這樣，動態(tài)刷新就是在IFRAME>內(nèi)進(jìn)行，不會影響用戶觀看頁面其它內(nèi)容。
以下代碼包含在主頁面中：
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 的標(biāo)識符
/script>
我們可以使用javascript控制RealPlayer插件更復(fù)雜的功能，如提取視頻的長寬、測試用戶的網(wǎng)絡(luò)速率、自定義播放事件等等。關(guān)于RealPlayer ActiveX開發(fā)的具體細(xì)節(jié)，請參閱RealPlayer官方網(wǎng)站http://service.real.com/help/library/guides/extend/embed.htm
我們假設(shè)有一個視頻文件，其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()函數(shù)動態(tài)的創(chuàng)建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); // 轉(zhuǎn)入install.htm頁面指導(dǎo)用戶進(jìn)行安裝
}
-->
/Script>
至此，我們已經(jīng)實現(xiàn)了一個基于Web的視頻點播的基本功能。但我們要想把功能做的更完美一些，還需要其它更復(fù)雜的考慮。如流媒體的制作、網(wǎng)頁美工的設(shè)計、網(wǎng)絡(luò)流速的考慮，以及網(wǎng)站視頻文件的有效組織。這些話題已經(jīng)超出了本文的討論范圍，請讀者自行參考相關(guān)資料。
評論