基于HTML5的視頻網站設計與Web前端EPG系統(tǒng)實現(xiàn)

徐鎮(zhèn)輝

?

基于HTML5的視頻網站設計與Web前端EPG系統(tǒng)實現(xiàn)

徐鎮(zhèn)輝

（漳州職業(yè)技術學院 計算機工程系，福建 漳州 363000）

HTML5是W3C制定的一個Web新標準，由它帶來的前端技術變革已經對Web應用產生了巨大的影響。分析了視頻分享網站的設計原則，提出基于HTML5的系統(tǒng)架構和功能設計，并對HTML5的技術特點，尤其對HTML5中新的頁面結構元素、智能表單控件和屬性、多媒體內嵌對象等新特性進行深入理解和探索，將這些新特性恰當?shù)貞糜谝曨l分享網站的Web前端EPG系統(tǒng)的設計中。

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

1 引 言

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

2 HTML5技術簡介

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

3 基于HTML5的視頻分享網站的系統(tǒng)架構和功能設計

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

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

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

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

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

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

4.1 頁面結構元素

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

表1 HTML5中新增的頁面結構元素

本Web 前端EPG系統(tǒng)的頁面在結構上主要是以圖1的形式設計的，用