基于代理服務(wù)的HTML5視頻網(wǎng)站訪問方法研究

梁洪波

摘要：HTML5已成為移動(dòng)設(shè)備上的視頻網(wǎng)站規(guī)范，基于HTML5構(gòu)建的視頻服務(wù)網(wǎng)站為專用的移動(dòng)設(shè)備提供服務(wù)，但機(jī)頂盒，硬盤播放器等嵌入式設(shè)備的處理能力有限，無(wú)法直接訪問此類網(wǎng)站。本文對(duì)使用代理服務(wù)方式實(shí)現(xiàn)嵌入式設(shè)備訪問HTML5視頻網(wǎng)站的方法進(jìn)行闡述，實(shí)現(xiàn)了嵌入式設(shè)備對(duì)HTML5視頻網(wǎng)站的訪問和播放，為處理能力有限的設(shè)備訪問此類網(wǎng)站提出了一種有效的解決方案。

關(guān)鍵詞：HTML5；流媒體；代理服務(wù)；嵌入式設(shè)備

中圖分類號(hào)：TP357文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1009-3044(2012)15-3514-04

Access the HTML5 Video Site Based on a Proxy Service

LIANG Hong-bo

(Anui Communications Technology Institute,Hefei 230051,China)

Abstract: HTML5 has become a video site on your mobile device specifications, and built based on HTML5 video website dedicated mo? bile devices to provide services, but the set-top boxes, hard disk player, and other embedded devices with limited processing power, can not directly access such sites. This paper described the use of agency services for embedded devices to access the HTML5 video site, HT ML5 video site access and playback of embedded devices, an effective solution to deal with the limited capacity of the devices to access such sites programs.

Key words：HTML5; media streaming; proxy service; embedded devices

蘋果提出并標(biāo)準(zhǔn)化了HTTP Live Stream協(xié)議，用來在標(biāo)準(zhǔn)HTTP協(xié)議的基礎(chǔ)上支持實(shí)時(shí)流媒體播放，在其移動(dòng)終端產(chǎn)品中，通過Safari瀏覽器實(shí)現(xiàn)了HTML5視頻標(biāo)簽的識(shí)別，同時(shí)通過播放器支持HTTP流協(xié)議。蘋果公司數(shù)以億計(jì)的移動(dòng)終端產(chǎn)品，促使大部分網(wǎng)站使用HTML5的視頻規(guī)范提供服務(wù)，如果能將此類服務(wù)引入到機(jī)頂盒等嵌入式多媒體終端中，將極大豐富家庭用戶的視頻服務(wù)體驗(yàn)。通過采用代理服務(wù)器，可以使機(jī)頂盒等設(shè)備順利訪問HTML5頁(yè)面，并對(duì)終端優(yōu)化回復(fù)內(nèi)容，使處理能力有限的嵌入式設(shè)備可以體驗(yàn)視頻網(wǎng)站提供的服務(wù)。

1基于HTML5的視頻服務(wù)概述

采用HTML5提供視頻服務(wù)的網(wǎng)站，架構(gòu)圖如圖1所示。

其主要組成部分介紹如下：

（1）視頻源及編碼處理：二者均采用AAC音頻編碼和H.264的視頻編碼方式，點(diǎn)播采用MP4作為文件封轉(zhuǎn)，直播則采用MPEG2 TS流。在直播視頻采集中，一般由編碼器和碼流分割器組成，采用硬件編碼器從衛(wèi)星接收機(jī)等將輸入的模擬信號(hào)進(jìn)行編碼；碼流分割器將編碼完成的視頻數(shù)據(jù)分割為10秒一段的ts文件，同時(shí)生成m3u8索引文件。

（2）視頻分發(fā)服務(wù)：一般由Web服務(wù)器構(gòu)成，為直播和點(diǎn)播數(shù)據(jù)提供HTTP下載服務(wù)；視頻數(shù)據(jù)和索引文件都通過該平臺(tái)分發(fā)。

（3）Web前端頁(yè)面：為客戶端提供訪問視頻的菜單索引服務(wù)和視頻播控服務(wù)，一般通過數(shù)據(jù)庫(kù)與后端的視頻分發(fā)服務(wù)連接。

（4）客戶端：客戶端一般通過瀏覽器訪問web頁(yè)面，瀏覽器需支持HTML5 Video標(biāo)簽的識(shí)別，并具備支持HTTP流協(xié)議的流媒體播放器。

在這類系統(tǒng)中，客戶端第一步獲取M3U8索引文件，通過解析M3U8識(shí)別TS文件獲取地址和解密密鑰等必要信息。第二步客戶端按索引列表的順序獲取媒體數(shù)據(jù)?？蛻舳丝梢圆捎肏TTP協(xié)議請(qǐng)求數(shù)據(jù)，HTTP協(xié)議是具有穿透防火墻的優(yōu)勢(shì)，一般的防火墻均允許HTTP協(xié)議通過。

播放器是最終完成視頻獲取和播放的實(shí)體。播放器在支持HTML5視頻功能中的主要作用是支持HTTP流協(xié)議。HTTP流協(xié)議的主體仍然是HTTP協(xié)議，并未做任何的協(xié)議擴(kuò)展，只是在HTTP協(xié)議基礎(chǔ)上，定義了M3U8類型的索引文件，并由此定義相關(guān)的擴(kuò)展協(xié)議。其主要含義如表1所示。

表1 M3U8文件示例及注釋

2嵌入式設(shè)備訪問HTML5頁(yè)面

機(jī)頂盒和硬盤播放器等嵌入式設(shè)備，具備視頻播放能力和網(wǎng)絡(luò)訪問能力。如果按照第二部分中描述的架構(gòu)，客戶端必須具備支持HTML5 video的瀏覽器和支持HLS協(xié)議的播放器，才能實(shí)現(xiàn)HTML5視頻網(wǎng)站的訪問。然而，在此類設(shè)備中，由于成本考慮，其主芯片處理能力較低，支持HTML5的全功能瀏覽器運(yùn)行極為緩慢，瀏覽頁(yè)面時(shí)的用戶體驗(yàn)不好；而且，由于各網(wǎng)站對(duì)客戶端瀏覽器類型的限制，非safari瀏覽器很難直接獲取視頻服務(wù)的頁(yè)面。為解決此問題，使用代理服務(wù)器：一方面可以偽裝客戶端為iphone，ipad等設(shè)備類型的safari瀏覽器，從而取得HTML5類型的頁(yè)面；另一方面可以針對(duì)服務(wù)器回復(fù)的數(shù)據(jù)進(jìn)行過濾優(yōu)化，提取必要的視頻獲取地址，使客戶端不依賴復(fù)雜的瀏覽器解析頁(yè)面。

2.1架構(gòu)概述

嵌入式終端中，由于處理能力有限，所以采用了簡(jiǎn)單的嵌入式瀏覽器，該瀏覽器支持基本的HTML 4.01和JavaScript 1.5等規(guī)范，不支持HTML5 Video標(biāo)簽。通過代理服務(wù)器的請(qǐng)求獲取到HTML5頁(yè)面內(nèi)容，再次經(jīng)過代理服務(wù)器的過濾模塊，將回應(yīng)內(nèi)容中的HTML5 Video部分修改為私有的標(biāo)簽，返回給瀏覽器。架構(gòu)如圖2所示。

其中各模塊的功能描述如下：

（1）功能簡(jiǎn)化的網(wǎng)絡(luò)瀏覽器：是用戶訪問頁(yè)面的圖形界面，直接顯示內(nèi)容到屏幕上。瀏覽器配置自己的web代理為本地代理服務(wù)器，則所有http請(qǐng)求均經(jīng)過本地的代理服務(wù)器發(fā)出，服務(wù)器回復(fù)也通過代理服務(wù)器處理后返回。

（2）代理服務(wù)器：將瀏覽器的HTTP請(qǐng)求進(jìn)行轉(zhuǎn)換，修改其中的UserAgent標(biāo)識(shí)，發(fā)往目標(biāo)服務(wù)器；目標(biāo)服務(wù)器回應(yīng)后，收取回應(yīng)內(nèi)容，過濾其中的廣告等冗余信息，簡(jiǎn)化頁(yè)面，同時(shí)將其中的HTML5 video標(biāo)簽修改為瀏覽器支持的私有視頻標(biāo)簽。最后將回復(fù)內(nèi)容交給瀏覽器。

（3）播放器：播放器被瀏覽器調(diào)用。瀏覽器發(fā)現(xiàn)頁(yè)面中有自定義的視頻標(biāo)簽，將相應(yīng)的參數(shù)傳遞給播放器，由播放器從目標(biāo)視頻網(wǎng)站獲取數(shù)據(jù)，完成播放功能。

2.2代理服務(wù)器的使用

代理服務(wù)器的主要功能有兩個(gè)：一是修改瀏覽器對(duì)服務(wù)器的請(qǐng)求信息，將其中的UserAgent標(biāo)識(shí)字段修改為服務(wù)器支持的格式；二是將服務(wù)器回應(yīng)的信息進(jìn)行過濾優(yōu)化。

（1）User-Agent修改：代理服務(wù)器中，查找HTTP頭字段的UserAgent部分，將其替換為如下標(biāo)識(shí)：

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/ 7B314 Safari/531.21.10

這樣，請(qǐng)求發(fā)送出去后，服務(wù)器認(rèn)為該設(shè)備是運(yùn)行Safari瀏覽器的iPad設(shè)備，會(huì)將對(duì)應(yīng)的HTML5視頻頁(yè)面返送回來。（2）服務(wù)器回送頁(yè)面的過濾優(yōu)化：請(qǐng)求回來的頁(yè)面中，包含的HTML5視頻信息一般為如下格式：

此段代碼表示瀏覽器窗口中內(nèi)嵌一個(gè)高度為325，寬度為510的視頻窗口，視頻來源為當(dāng)前站點(diǎn)下的test.m3u8索引文件。代理服務(wù)器監(jiān)測(cè)

function media_play()

{

var player=new MediaPlay(); player.playW = 510; player.playH = 325;

player.setSingleMedia（test.m3u8，vod）;

player.autoplay();

}

同時(shí)修改頁(yè)面的body標(biāo)簽的onload中調(diào)用media_play()函數(shù)。

3.3瀏覽器的處理

該瀏覽器為簡(jiǎn)單的嵌入式瀏覽器，針對(duì)視頻應(yīng)用，瀏覽器擴(kuò)展了MediaPlay方法，用以支持頁(yè)面內(nèi)嵌視頻的處理，其主要方法和屬性如下：（1）初始化及設(shè)置播放來源：該類接口主要實(shí)現(xiàn)對(duì)播放器的初始化，反初始化及播放源的設(shè)置。接口主要包含：a)setSingleMedia (href, transType)：設(shè)置播放來源，href字符串表示節(jié)目的路徑，該接口在播放器開始播放前調(diào)用b)init(void)：使用播放器前調(diào)用，申請(qǐng)系統(tǒng)資源；

c)releaseMediaPlayer (void)：播放器使用完畢后調(diào)用，釋放系統(tǒng)資源。

a)播放控制接口：控制播放器的動(dòng)作，包括播放，暫停，恢復(fù)播放，停止，快進(jìn)，快退等。接口包含：play()：開始播放；b)pause()：暫停當(dāng)前播放；

c)resume()：從暫停狀態(tài)開始恢復(fù)播放；

d)stop ()：停止當(dāng)前節(jié)目播放；

e)fastForward（speed）：按照speed指定的速率快進(jìn)播放，speed取值范圍為1-32，播放到結(jié)束時(shí)自動(dòng)停止播放；f)fastRewind（speed）：按照speed指定的速率快退播放，speed取值范圍為1-32，播放到開頭時(shí)自動(dòng)轉(zhuǎn)為播放；（2）音量設(shè)置接口：該部分接口主要實(shí)現(xiàn)音量的增減，靜音等。其中包含：

a)setVolume（volume）：設(shè)置音量大小，參數(shù)取值為0—100,0表示靜音；

b)getVolume（）：獲取當(dāng)前音量大小，返回值為0—100范圍取值。

（3）播放器窗口設(shè)置接口：主要用于實(shí)現(xiàn)播放窗口的定位，大小等控制。接口包含：a)playWindowMode（mode）：設(shè)置窗口模式，參數(shù)為0表示全屏模式，1表示小窗口模式；

b)playX：窗口位置X坐標(biāo)，坐標(biāo)起始位置為左上角；

c)playY：窗口位置Y坐標(biāo)，坐標(biāo)起始位置為左上角；

d)playW：窗口寬度；

e)playH：窗口高度。

（4）播放屬性獲取接口：該類接口主要獲取播放節(jié)目的屬性，其中包含：

a)playStartTime：播放開始時(shí)間，單位為秒；

b)playEndTime：播放結(jié)束時(shí)間，單位為秒；

c)playMute：播放是否靜音，0非，1是；

d)playVolume：當(dāng)前播放音量，返回值為0—100；

e)playTrack：當(dāng)前播放的聲道，0表示全部，1表示左聲道，2表示右聲道；

f)playScreenScale：播放模式是16:9或者4:3,0表示16:9,1表示4:3；

（5）其它控制接口，其中包含：

a)playAutoplay：是否自動(dòng)播放；

b)playVideoClear：是否清除屏幕；

c)playStopCurrent：是否強(qiáng)制播放。

使用該自定義播放器對(duì)象，可以在瀏覽器窗口中嵌入播放內(nèi)容，并將表單對(duì)象（如按鈕等）關(guān)聯(lián)到對(duì)應(yīng)的JavaScript接口，實(shí)現(xiàn)視頻的播放，暫停，快進(jìn)，快退等操作。

3應(yīng)用實(shí)例

在一款采用ARM CPU核心的硬盤播放器方案中，其CPU主頻為600MHz，內(nèi)存為128M，CPU內(nèi)部集成了全媒體硬件解碼芯片，可以處理解析播放主流的音視頻格式。為使該設(shè)備可以訪問觀看互聯(lián)網(wǎng)上的視頻類節(jié)目，筆者采用了本設(shè)計(jì)的方案進(jìn)行功能實(shí)現(xiàn)。其中，采用GTK開源圖形庫(kù)，Dillo開源的簡(jiǎn)單瀏覽器，自己編寫了代理服務(wù)服務(wù)部分的代碼。

采用該方案，我們針對(duì)奇藝網(wǎng)站實(shí)現(xiàn)了HTML5的轉(zhuǎn)換，采集和重新排版，代理服務(wù)部分主要完成了數(shù)據(jù)采集和過濾，并簡(jiǎn)化了最終的播控頁(yè)面，終端播放器上可以觀看來自qiyi的節(jié)目?jī)?nèi)容，并且內(nèi)容可以跟隨奇藝的更新。圖3和圖4分別是采集前后的不同頁(yè)面效果。

可見采集后，去除了原始頁(yè)面的廣告，關(guān)聯(lián)視頻等內(nèi)容，實(shí)現(xiàn)了視頻的獨(dú)立和流暢播放。

4結(jié)論

采用代理服務(wù)的方法，可以較好的解決嵌入式設(shè)備訪問HTML5視頻網(wǎng)站的局限，為機(jī)頂盒等資源有限的嵌入式設(shè)備提供訪問標(biāo)準(zhǔn)互聯(lián)網(wǎng)的途徑。隨著設(shè)備處理能力的提高，嵌入式設(shè)備中有可能運(yùn)行全功能的支持HTML5的瀏覽器，終端因此可以直接訪問互聯(lián)網(wǎng)頁(yè)面；但這種情況下，采用代理服務(wù)的方案，可以過濾和修改回復(fù)頁(yè)面中的某些特殊字段，提高終端的兼容性。

參考文獻(xiàn)：

[1]陸凌牛. HTML 5與CSS 3權(quán)威指南[M].北京:機(jī)械工業(yè)出版社,2011.

[2]（荷）柳伯斯，（美）阿伯斯，（美）薩姆. HTML5高級(jí)程序設(shè)計(jì)[M].李杰,柳靖,劉淼,譯.北京:人民郵電出版社,2911.

[3]馬濤,朱印宏.視頻網(wǎng)站修煉術(shù)[M].北京:電子工業(yè)出版社,2009.

[4]王金龍,蘇瑞元,江叔盈,遲文麗.嵌入式操作系統(tǒng)開發(fā)與應(yīng)用程序設(shè)計(jì)[M].北京:清華大學(xué)出版社,2009.