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