近年來
視頻點播VOD(Video on Demand)的名字在媒體上出現得越來越多
VOD技術使人們可以根據自己的興趣
不用借助錄像機
影碟機
有線電視而在電腦或電視上自由地點播節目庫中的視頻節目和信息
是可以對視頻節目內容進行自由選擇的交互式系統
VOD的本質是信息的使用者根據自己的需求主動獲得多媒體信息它區別於信息發布的最大不同:一是主動性二是選擇性從某種意義上說這是信息的接受者根據自身需要進行自我完善和自我發展的方式這種方式在當今的信息社會中將越來越符合信息資源消費者的深層需要可以說VOD是信息獲取的未來主流方式在多媒體視音頻方面的表現VOD的概念將會在信息獲取的領域快速擴展具有無限廣闊的發展前景
【背景】
筆者所在的單位建設有一個內部網站為了進一步提高網絡的可用性完善網站的功能決定在網絡上提供視頻點播功能經過一段時間的摸索和比較筆者最後選擇了RealSystem公司的RealPlayer作為視頻文件的播放工具主要基於以下幾點考慮
RealPlayer 支持當今絕大多數的音視頻流媒體格式包括當前流行的MP等音頻媒質
RealPlayer 默認的rm格式在保證播放質量的同時文件壓縮比高使其更利於網絡傳輸
RealPlayer在Internet上擁有廣泛的用戶群和服務商支持
可供選擇的還有Microsoft的MediaPlayerAPPLE 的QuickTime等具體請參看搜新網評測文章《三大主流流媒體技術對比》(_stream_comp/)
【播放方式的選擇】
一般而言安裝好RealPlayer之後有兩種方式可供選擇來連接視頻文件一種是直接在Web頁面上提供視頻文件的URL地址當用戶點擊鏈接時RealPlayer自動識別並實時連接進行播放第二種方法是通過ActiveX控件方式在Web頁面中嵌入RealPlayer對象並通過DHTML為內嵌對象動態指定視頻流URL從而為視頻播放提供了一個統一的友好界面
前一種方法對於設計者來說相對比較簡單只需要提供視頻文件的播放路徑RealPlayer的熟練用戶還可以通過自定義RealPlayer的播放方式下載視覺插件添加到收藏夾等方式進行視頻管理但這種方式也存在以下幾點缺陷
對於含有中文路徑和中文名的視頻文件浏覽器並不能很好支持常常出現找不到文件等錯誤信息
需要系統進行文件關聯如果文件關聯出錯浏覽器將無所適從
對終端用戶來說往往希望看到統一的播放界面而不是彈出式播放
通過Web嵌入式視頻流管理可以把用戶端的操作請求減少到最小(用戶只需簡單的安裝RealPlayer播放器)如果再輔以精心的美工設計還可以按照設計者的意願定制出精美大方的播放界面
【基本概念】
在進行設計之前我們先來了解一些相關的基本概念
<object><embed>標簽
<object>是Microsoft在IE之後推出的用來替代<embed>標簽的對象定義標簽(IE仍然支持<embed>)通過classid屬性定義相應的對象類型<embed>標簽是Netscape浏覽器支持的對象定義標簽如果開發者需要同時獲得IE和NetScape兩種浏覽器用戶的支持最好使用<embed>標簽
定義ram文件
ram格式文件同rm文件一樣也是RealPlayer所支持的視頻文件壓縮格式所不同的是ram文件可以僅簡單的包括視頻文件的URL地址也就是說ram文件可以為簡單的文本格式每一行定義一個視頻文件的URL地址
筆者在測試時發現嵌入式RealPlayer在播放視頻文件時一般采用把視頻文件整個下載到本地然後進行播放這對於較大的視頻文件來說速度讓人難以忍受解決這個問題的方法一是把視頻文件簡單的分割成大小適中的小文件分段播放(由於 REAL 公司對 RM 格式的實行封閉管理所以 RM 到目前為止還不能像 MPEG 等視頻文件一樣用視頻軟件自由的編輯)另外一種就是采用ram文件RealPlayer簡單的下載文本格式的ram文件然後取出其中的真實地址然後自動連接到網絡進行實時的點對點播放其缺點是增加了服務器負擔
類似的Microsoft Media Player采用asx格式來定義asf文件
DHTML
DHTML是Dynamic HTML的縮寫DHTML通過傳統的HTML語言利用CSS(Cascading Style Sheets即樣式表)並依靠JavaScript使一向靜止不變的頁面得以動起來 Netscape 和IE /版本支持DHTMLDHTML是一種完全客戶端技術直接通過WEB頁面實現頁面與用戶之間的交互性DHTML的優秀之處在於增強了Web頁面的功能在Web頁面直接建立動畫游戲和應用軟件等等提供了浏覽站點的全新方式與JavaFlash等技術不同的是用DHTML編制的頁面不需要插件的支持就能完整的實現
【設計過程】
下面筆者以IE為例說明一個嵌入式WEB視頻點播系統的實現方法其中用到了部分PHP和JavaScript技術有疑惑的讀者請參考相關資料
一插入RealPlayer ActiveX對象(如果要進行測試需要先安裝RealPlayer播放器)
假定以下代碼包含在videophp文檔中(該文件將在主頁面中通過<iframe>進行鏈接)
<object width= height= classid=clsid:CFCDAABEcfBBAFBBCCFA>
<param name=CONTROLS value=ImageWindow>
<param name=CONSOLE value=Video>
<param name=CENTER value=TRUE>
<param name=MAINTAINSPECT value=TRUE>
</object> //定義播放界面
<object width= height= classid=clsid:CFCDAABEcfBBAFBBCCFA>
<param name=CONTROLS value=StatusBar>
<param name=CONSOLE value=Video>
</object> //定義狀態欄
<object width= height= classid=clsid:CFCDAABEcfBBAFBBCCFA>
<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=>
<param name=LOOP value=>
<param name=NUMLOOP value=>
</object> //定義控制面板
其中CONTROLS參數用來指定播放器的控件外觀可以用多個控件進行組合並通過CONSOLE參數進行關聯
有關param參數讀者可以參閱RealPlayer官方網站
這裡的SRC參數尤為重要用來指定視頻流文件的URL地址這裡筆者使用PHP代碼的方法動態的指定SRC讀者也可以使用其它如ASP或完全通過 JavaScript 實現
二使用DHTML動態控制RealPlayer控件的播放
小技巧<IFRAME>的妙用由於為RealPlayer控件指定新的SRC需要刷新頁面使用<IFRAME>可以把RealPlayer控件嵌入到單獨的頁面中這樣動態刷新就是在<IFRAME>內進行不會影響用戶觀看頁面其它內容
以下代碼包含在主頁面中
<IFRAME id=iVideo SRC=videophp Width= Height= frameborder= SCROLLING=no>
</IFRAME>其中videophp文件用力顯示RealPlayer控件
下面我們加入簡單的JavaScript 代碼用來控制視頻的播放
<script language=JavaScript>
function play(filename){
topdocumentall(iVideo)src = videophp?src=+filename;
} // iVideo 是剛剛定義的IFRAME 的標識符
</script>
我們可以使用javascript控制RealPlayer插件更復雜的功能如提取視頻的長寬測試用戶的網絡速率自定義播放事件等等關於RealPlayer ActiveX開發的具體細節請參閱RealPlayer官方網站
我們假設有一個視頻文件其URL為那麼我們就可以這樣定義
<a JavaScript:play()>文件</a>如果文件是在本地URL也可以為相對路徑
三檢測用戶是否安裝RealPlayer播放器
在頁面的<head></head>部分加入以下JavaScript代碼用以檢測用戶是否安裝RealPlayer播放器
<SCRIPT LANGUAGE=JavaScript>
<!
var RealMode=;
var RealPlayer=;
var RealPlayer=;
var RealPlayerG=;
if (navigatoruserAgentindexOf(MSIE)< ){
numPlugins = navigatorpluginslength;
for (i = ; i < numPlugins; i++){
plugin = navigatorplugins[i];
if (pluginnamesubstring()==RealPlayer){
RealMode=;
}
}
}
// 以下代碼通過VBScript的CreateObject()函數動態的創建RealPlayer對象
documentwrite(<SCRIPT LANGUAGE=VBScript\> \n);
documentwrite(on error resume next \n);
documentwrite(RealPlayerG = (NOT IsNull(CreateObject(rmocxRealPlayer G Control)))\n);
documentwrite(RealPlayer = (NOT IsNull(CreateObject(RealPlayerRealPlayer(tm) ActiveX Control (bit))))\n);
documentwrite(RealPlayer = (NOT IsNull(CreateObject(RealVideoRealVideo(tm) ActiveX Control (bit))))\n);
documentwrite(</SCRIPT\> \n);
if ( RealPlayerG || RealPlayer || RealPlayer ){
//可以在此處添加<object>對象
}else if ( RealMode ){ // NetScape浏覽器用戶
// 可以在此處加入<embed>對象
}else{
windowlocationreplace(); // 轉入頁面指導用戶進行安裝
}
>
</Script>
至此
我們已經實現了一個基於Web的視頻點播的基本功能
但我們要想把功能做的更完美一些
還需要其它更復雜的考慮
如流媒體的制作
網頁美工的設計
網絡流速的考慮
以及網站視頻文件的有效組織
這些話題已經超出了本文的討論范圍
請讀者自行參考相關資料
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19701.html