【背景】
筆者所在的單位建設有一個內部網站,為了進一步提高網路的可用性,完善網站的功能,決定在網路上提供視頻點播功能。經過一段時間的摸索和比較,筆者最後選擇了RealSystem公司的RealPlayer作為視頻檔案的播放工具,主要基於以下幾點考慮:1、 RealPlayer 支持當今絕大多數的音視頻流媒體格式,包括當前流行的MP3等音頻媒質;
2、 RealPlayer 默認的.rm格式在保證播放質量的同時,檔案壓縮比高,使其更利於網路傳輸;
3、 RealPlayer在Internet上擁有廣泛的用戶群和服務商支持。
可供選擇的還有Microsoft的MediaPlayer、APPLE 的QuickTime等。具體請參看“搜新網”評測文章:《三大主流流媒體技術對比》(http://www.souxin.com/stream/txt/3_stream_comp/www.souxin.com.htm)
【播放方式的選擇】
一般而言,安裝好RealPlayer之後,有兩種方式可供選擇來連線視頻檔案。一種是直接在Web頁面上提供視頻檔案的URL地址,當用戶點擊連結時,RealPlayer自動識別並實時連線進行播放;第二種方法是通過ActiveX控制項方式在Web頁面中嵌入RealPlayer對象,並通過DHTML為內嵌對象動態指定視頻流URL,從而為視頻播放提供了一個統一的友好界面。前一種方法對於設計者來說相對比較簡單,只需要提供視頻檔案的播放路徑。RealPlayer的熟練用戶,還可以通過自定義RealPlayer的播放方式、下載視覺外掛程式、添加到收藏夾等方式進行視頻管理。但這種方式也存在以下幾點缺陷:
1、對於含有中文路徑和中文名的視頻檔案,瀏覽器並不能很好支持,常常出現找不到檔案等錯誤信息。
2、需要系統進行檔案關聯,如果檔案關聯出錯,瀏覽器將無所適從。
3、對終端用戶來說,往往希望看到統一的播放界面,而不是彈出式播放。
通過Web嵌入式視頻流管理,可以把用戶端的操作請求減少到最小(用戶只需簡單的安裝RealPlayer播放器)。如果再輔以精心的美工設計,還可以按照設計者的意願定製出精美大方的播放界面。
【基本概念】
在進行設計之前,我們先來了解一些相關的基本概念。1、、標籤
是Microsoft在IE4.0之後推出的,用來替代標籤的對象定義標籤(IE仍然支持),通過classid屬性定義相應的對象類型。標籤是Netscape瀏覽器支持的對象定義標籤。如果開發者需要同時獲得IE和NetScape兩種瀏覽器用戶的支持,最好使用標籤。
2、定義ram檔案
ram格式檔案同rm檔案一樣,也是RealPlayer所支持的視頻檔案壓縮格式,所不同的是ram檔案可以僅簡單的包括視頻檔案的URL地址。也就是說,ram檔案可以為簡單的文本格式,每一行定義一個視頻檔案的URL地址。
筆者在測試時發現,嵌入式RealPlayer在播放視頻檔案時,一般採用把視頻檔案整個下載到本地然後進行播放。這對於較大的視頻檔案來說,速度讓人難以忍受。解決這個問題的方法,一是把視頻檔案簡單的分割成大小適中的小檔案分段播放(由於 REAL 公司對 RM 格式的實行“封閉管理”,所以 RM 到目前為止還不能像 MPEG 等視頻檔案一樣用視頻軟體自由的編輯);另外一種就是採用ram檔案。RealPlayer簡單的下載文本格式的ram檔案,然後取出其中的真實地址,然後自動連線到網路進行實時的點對點播放。其缺點是增加了伺服器負擔。
類似的,Microsoft Media Player採用asx格式來定義asf檔案。
3、DHTML
DHTML是Dynamic HTML的縮寫,DHTML通過傳統的HTML語言,利用CSS(Cascading Style Sheets,即樣式表),並依靠JavaScript使一向靜止不變的頁面得以“動”起來。 Netscape 4.0和IE 4.0/5.0版本支持DHTML,DHTML是一種完全“客戶端”技術,直接通過WEB頁面實現頁面與用戶之間的互動性。DHTML的優秀之處在於增強了Web頁面的功能,在Web頁面直接建立動畫、遊戲和套用軟體等等,提供了瀏覽站點的全新方式,與Java、Flash等技術不同的是,用DHTML編制的頁面不需要外掛程式的支持就能完整的實現。
【設計過程】
下面筆者以IE5.0為例,說明一個嵌入式WEB視頻點播系統的實現方法,其中用到了部分PHP和JavaScript技術,有疑惑的讀者請參考相關資料。
一、插入RealPlayer ActiveX對象(如果要進行測試,需要先安裝RealPlayer播放器)
假定以下代碼包含在video.php文檔中(該檔案將在主頁面中通過//定義播放界面
//定義狀態欄
//定義控制臺
其中,CONTROLS參數用來指定播放器的控制項外觀,可以用多個控制項進行組合,並通過CONSOLE參數進行關聯。
有關param參數,讀者可以參閱RealPlayer官方網站http://service.real.com/help/library/guides/production/htmfiles/control.htm。
這裡的SRC參數尤為重要,用來指定視頻流檔案的URL地址。這裡筆者使用PHP代碼的方法動態的指定SRC,讀者也可以使用其它如ASP,或完全通過 JavaScript 實現。
二、使用DHTML動態控制RealPlayer控制項的播放
小技巧:,其中,video.php檔案用力顯示RealPlayer控制項。
下面我們加入簡單的JavaScript 代碼用來控制視頻的播放。
我們可以使用javascript控制RealPlayer外掛程式更複雜的功能,如提取視頻的長寬、測試用戶的網路速率、自定義播放事件等等。關於RealPlayer ActiveX開發的具體細節,請參閱RealPlayer官方網站http://service.real.com/help/library/guides/extend/embed.htm。
我們假設有一個視頻檔案,其URL為http://YourURL/filename.ram,那么我們就可以這樣定義:
檔案1,如果檔案是在本地,URL也可以為相對路徑。
三、檢測用戶是否安裝RealPlayer播放器
在頁面的部分加入以下JavaScript代碼,用以檢測用戶是否安裝RealPlayer播放器: