新聞中心

EEPW首頁 > 嵌入式系統(tǒng) > 設(shè)計(jì)應(yīng)用 > 嵌入式Web視頻點(diǎn)播系統(tǒng)實(shí)現(xiàn)方法

嵌入式Web視頻點(diǎn)播系統(tǒng)實(shí)現(xiàn)方法

作者: 時(shí)間:2017-06-06 來源:網(wǎng)絡(luò) 收藏

近年來,視頻點(diǎn)播VOD(Video on Demand)的名字在媒體上出現(xiàn)得越來越多。VOD技術(shù)使人們可以根據(jù)自己的興趣,不用借助錄像機(jī)、影碟機(jī)、有線電視而在電腦或電視上自由地點(diǎn)播節(jié)目庫中的視頻節(jié)目和信息,是可以對視頻節(jié)目內(nèi)容進(jìn)行自由選擇的交互式系統(tǒng)。

VOD的本質(zhì)是信息的使用者根據(jù)自己的需求主動(dòng)獲得多媒體信息,它區(qū)別于信息發(fā)布的最大不同:一是主動(dòng)性、二是選擇性。從某種意義上說這是信息的接受者根據(jù)自身需要進(jìn)行自我完善和自我發(fā)展的方式,這種方式在當(dāng)今的信息社會(huì)中將越來越符合信息資源消費(fèi)者的深層需要,可以說VOD是信息獲取的未來主流方式在多媒體視音頻方面的表現(xiàn)。VOD的概念將會(huì)在信息獲取的領(lǐng)域快速擴(kuò)展,具有無限廣闊的發(fā)展前景。

【背景】

筆者所在的單位建設(shè)有一個(gè)內(nèi)部網(wǎng)站,為了進(jìn)一步提高網(wǎng)絡(luò)的可用性,完善網(wǎng)站的功能,決定在網(wǎng)絡(luò)上提供視頻點(diǎn)播功能。經(jīng)過一段時(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上擁有廣泛的用戶群和服務(wù)商支持。

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

【播放方式的選擇】

一般而言,安裝好RealPlayer之后,有兩種方式可供選擇來連接視頻文件。一種是直接在頁面上提供視頻文件的URL地址,當(dāng)用戶點(diǎn)擊鏈接時(shí),RealPlayer自動(dòng)識(shí)別并實(shí)時(shí)連接進(jìn)行播放;第二種方法是通過ActiveX控件方式在頁面中嵌入RealPlayer對象,并通過DHTML為內(nèi)嵌對象動(dòng)態(tài)指定視頻流URL,從而為視頻播放提供了一個(gè)統(tǒng)一的友好界面。

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

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

2、需要系統(tǒng)進(jìn)行文件關(guān)聯(lián),如果文件關(guān)聯(lián)出錯(cuò),瀏覽器將無所適從。

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

通過視頻流管理,可以把用戶端的操作請求減少到最?。ㄓ脩糁恍韬唵蔚陌惭bRealPlayer播放器)。如果再輔以精心的美工設(shè)計(jì),還可以按照設(shè)計(jì)者的意愿定制出精美大方的播放界面。

【基本概念】

在進(jìn)行設(shè)計(jì)之前,我們先來了解一些相關(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ā)者需要同時(shí)獲得IE和NetScape兩種瀏覽器用戶的支持,最好使用embed>標(biāo)簽。

2、定義ram文件

ram格式文件同rm文件一樣,也是RealPlayer所支持的視頻文件壓縮格式,所不同的是ram文件可以僅簡單的包括視頻文件的URL地址。也就是說,ram文件可以為簡單的文本格式,每一行定義一個(gè)視頻文件的URL地址。

筆者在測試時(shí)發(fā)現(xiàn),RealPlayer在播放視頻文件時(shí),一般采用把視頻文件整個(gè)下載到本地然后進(jìn)行播放。這對于較大的視頻文件來說,速度讓人難以忍受。解決這個(gè)問題的方法,一是把視頻文件簡單的分割成大小適中的小文件分段播放(由于 REAL 公司對 RM 格式的實(shí)行“封閉管理”,所以 RM 到目前為止還不能像 MPEG 等視頻文件一樣用視頻軟件自由的編輯);另外一種就是采用ram文件。RealPlayer簡單的下載文本格式的ram文件,然后取出其中的真實(shí)地址,然后自動(dòng)連接到網(wǎng)絡(luò)進(jìn)行實(shí)時(shí)的點(diǎn)對點(diǎn)播放。其缺點(diǎn)是增加了服務(wù)器負(fù)擔(dān)。

類似的,Microsoft Media Player采用asx格式來定義asf文件。

3、DHTML

DHTML是Dynamic HTML的縮寫,DHTML通過傳統(tǒng)的HTML語言,利用CSS(Cascading Style Sheets,即樣式表),并依靠JavaScript使一向靜止不變的頁面得以“動(dòng)”起來。 Netscape 4.0和IE 4.0/5.0版本支持DHTML,DHTML是一種完全“客戶端”技術(shù),直接通過WEB頁面實(shí)現(xiàn)頁面與用戶之間的交互性。DHTML的優(yōu)秀之處在于增強(qiáng)了Web頁面的功能,在Web頁面直接建立動(dòng)畫、游戲和應(yīng)用軟件等等,提供了瀏覽站點(diǎn)的全新方式,與Java、Flash等技術(shù)不同的是,用DHTML編制的頁面不需要插件的支持就能完整的實(shí)現(xiàn)。

【設(shè)計(jì)過程】

下面筆者以IE5.0為例,說明一個(gè)WEB的實(shí)現(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ù)用來指定播放器的控件外觀,可以用多個(gè)控件進(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代碼的方法動(dòng)態(tài)的指定SRC,讀者也可以使用其它如ASP,或完全通過 JavaScript 實(shí)現(xiàn)。

本文引用地址:http://m.butianyuan.cn/article/201706/349447.htm


二、使用DHTML動(dòng)態(tài)控制RealPlayer控件的播放

小技巧:IFRAME>的妙用。由于為RealPlayer控件指定新的SRC需要刷新頁面,使用IFRAME>可以把RealPlayer控件嵌入到單獨(dú)的頁面中,這樣,動(dòng)態(tài)刷新就是在IFRAME>內(nèi)進(jìn)行,不會(huì)影響用戶觀看頁面其它內(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)識(shí)符

/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è)有一個(gè)視頻文件,其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ù)動(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瀏覽器用戶

// 可以在此處加入embed>對象

}else{

window.location.replace(install.htm); // 轉(zhuǎn)入install.htm頁面指導(dǎo)用戶進(jìn)行安裝

}

-->

/Script>

至此,我們已經(jīng)實(shí)現(xiàn)了一個(gè)基于Web的視頻點(diǎn)播的基本功能。但我們要想把功能做的更完美一些,還需要其它更復(fù)雜的考慮。如流媒體的制作、網(wǎng)頁美工的設(shè)計(jì)、網(wǎng)絡(luò)流速的考慮,以及網(wǎng)站視頻文件的有效組織。這些話題已經(jīng)超出了本文的討論范圍,請讀者自行參考相關(guān)資料。



評論


相關(guān)推薦

技術(shù)專區(qū)

關(guān)閉