基于HTML5的視頻網(wǎng)站設(shè)計(jì)與Web前端EPG系統(tǒng)實(shí)現(xiàn)

徐鎮(zhèn)輝

?

基于HTML5的視頻網(wǎng)站設(shè)計(jì)與Web前端EPG系統(tǒng)實(shí)現(xiàn)

徐鎮(zhèn)輝

（漳州職業(yè)技術(shù)學(xué)院 計(jì)算機(jī)工程系，福建 漳州 363000）

HTML5是W3C制定的一個(gè)Web新標(biāo)準(zhǔn)，由它帶來的前端技術(shù)變革已經(jīng)對Web應(yīng)用產(chǎn)生了巨大的影響。分析了視頻分享網(wǎng)站的設(shè)計(jì)原則，提出基于HTML5的系統(tǒng)架構(gòu)和功能設(shè)計(jì)，并對HTML5的技術(shù)特點(diǎn)，尤其對HTML5中新的頁面結(jié)構(gòu)元素、智能表單控件和屬性、多媒體內(nèi)嵌對象等新特性進(jìn)行深入理解和探索，將這些新特性恰當(dāng)?shù)貞?yīng)用于視頻分享網(wǎng)站的Web前端EPG系統(tǒng)的設(shè)計(jì)中。

HTML5；Web應(yīng)用；視頻分享網(wǎng)站；Web前端EPG系統(tǒng)

1 引 言

隨著寬帶網(wǎng)絡(luò)的普及、硬盤空間的價(jià)格持續(xù)降低以及音視頻編碼技術(shù)的發(fā)展，視頻分享網(wǎng)站在互聯(lián)網(wǎng)上已經(jīng)流行起來。國外受歡迎的視頻分享網(wǎng)站有YouTube、Hulu等，國內(nèi)規(guī)模較大的有土豆（Tudou）、優(yōu)酷（Youku）、六間房（6.cn）、魔方網(wǎng)（Mofile）等，還隨處可見小型的視頻分享站點(diǎn)。這些都是Web2.0時(shí)代的產(chǎn)物，充分體現(xiàn)了Web2.0互動(dòng)、分享、交流的核心理念。可如今Web應(yīng)用即將進(jìn)入HTML5的時(shí)代，特別是基于HTML5的Web App將為互聯(lián)網(wǎng)的應(yīng)用帶來跨越式的發(fā)展。

2 HTML5技術(shù)簡介

HTML5規(guī)范于已2012年底正式定稿，是開放Web網(wǎng)絡(luò)平臺的奠基石，包括 HTML、CSS 和 Javascript在內(nèi)的一套技術(shù)的組合。它彌補(bǔ)了HTML4在交互、媒體和本地操作等方面的不足，支持當(dāng)前多樣的、復(fù)雜的Web 內(nèi)容。在HTML5中，新增了許多帶有語義性的標(biāo)記，來加速瀏覽器解釋頁面中元素的速度；新增了許多交互體驗(yàn)元素，提升用戶的體驗(yàn)度；新增了許多新的表單控件和屬性，完善表單的功能；新增了對多媒體標(biāo)簽的支持，從此脫離插件的羈絆；除此之外，HTML5在離線瀏覽、本地存儲、Web Socket以及Web Workers等方面也有獨(dú)特之處，已經(jīng)受到許多業(yè)內(nèi)巨頭的青睞，包括Adobe、蘋果、谷歌、微軟、Mozilla基金會(huì)、Opera軟件公司等紛紛支持HTML5。HTML5被認(rèn)為是未來互聯(lián)網(wǎng)發(fā)展的一個(gè)重要方向，目的是將Web帶入一個(gè)成熟的應(yīng)用平臺[1]。

3 基于HTML5的視頻分享網(wǎng)站的系統(tǒng)架構(gòu)和功能設(shè)計(jì)

視頻分享網(wǎng)站的設(shè)計(jì)應(yīng)以視頻用戶的習(xí)慣和需求來進(jìn)行，除了要求內(nèi)容正確客觀、時(shí)尚創(chuàng)新之外，還應(yīng)該具備易用性、互動(dòng)性和超前性。而基于HTML5的視頻分享網(wǎng)站不僅在現(xiàn)階段具有先進(jìn)性，更重要的是還能適應(yīng)目前UCD(User Center Design)以用戶為中心的設(shè)計(jì)需求，提供給用戶新的Web體驗(yàn)方案，讓用戶僅僅安裝一個(gè)瀏覽器，無需安裝其他任何應(yīng)用程序，就可以更方便地更快速地享受高清流暢的富客戶端的觀影體驗(yàn)。

該基于HTML5的視頻分享網(wǎng)站系統(tǒng)采用B/S的三層架構(gòu)體系，通過將數(shù)據(jù)層、商務(wù)層和表示層三層分離，不但方便項(xiàng)目的開發(fā)，而且還可以提高系統(tǒng)的安全性和可擴(kuò)展性。該系統(tǒng)功能包含三大模塊，分別為：視頻服務(wù)推送系統(tǒng)、多媒體內(nèi)容管理系統(tǒng)和視頻服務(wù)Web 前端EPG系統(tǒng)。

其中，視頻服務(wù)推送系統(tǒng)，即流媒體服務(wù)系統(tǒng)，主要為用戶提供視頻的點(diǎn)播和直播服務(wù)[2]。首先分別對點(diǎn)播和直播的數(shù)據(jù)源進(jìn)行處理：對于采集來的直播型數(shù)據(jù)源，先由編碼器將其編碼成H.264視頻編碼和AAC音頻編碼的格式并封裝為MPEG-2 TS文件后再輸入到流分割器中，由分割器將此文件切割成以10秒一段的TS文件，同時(shí)生成M3U8的索引文件，并隨新數(shù)據(jù)的產(chǎn)生不斷更新索引文件；對于點(diǎn)播型數(shù)據(jù)源，采用MP4進(jìn)行封裝，同時(shí)也創(chuàng)建索引文件，但索引文件中只指向一個(gè)獨(dú)立的MP4文件[3，4]。然后由Web服務(wù)器或Web緩存系統(tǒng)把這些處理好欲分發(fā)的視頻文件推送出去。

多媒體內(nèi)容管理系統(tǒng)主要對存放在存儲設(shè)備上的多媒體文件進(jìn)行管理，包括用戶管理、視頻的上傳、在線編輯、檢索、分類、評論等功能[2]。

本文所探討的Web 前端EPG系統(tǒng)是視頻網(wǎng)站前端的網(wǎng)站系統(tǒng)，采用HTML5技術(shù)。用戶通過能支持HTML5 Video標(biāo)簽和HTTP流協(xié)議的瀏覽器如IE9、Firefox 4.0、Opera11和Chrome10等來訪問Web頁面，通過URL地址先引用視頻分發(fā)系統(tǒng)中的影片索引文件，再由影片索引文件關(guān)聯(lián)到服務(wù)器上的視頻資源。該模塊主要為用戶提供一個(gè)良好的視頻服務(wù)導(dǎo)航機(jī)制，一方面將視頻節(jié)目的附加信息，如內(nèi)容簡介、演員、導(dǎo)演等基本信息提供給用戶參考，方便用戶選擇自己喜歡的視頻節(jié)目并觀看；另一方面提供用戶評價(jià)系統(tǒng)，讓用戶看完后對影片進(jìn)行評價(jià)和反饋。

4 HTML5的新特性在Web前端EPG系統(tǒng)的應(yīng)用

4.1 頁面結(jié)構(gòu)元素

為了使頁面結(jié)構(gòu)更加清晰明確和容易閱讀，HTML5中增加了許多新的頁面結(jié)構(gòu)元素[5]，如表1所示。

表1 HTML5中新增的頁面結(jié)構(gòu)元素

本W(wǎng)eb 前端EPG系統(tǒng)的頁面在結(jié)構(gòu)上主要是以圖1的形式設(shè)計(jì)的，用