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