HTML5視頻網(wǎng)站設(shè)計(jì)與研究

梁曉婭　張恒

摘要：HTML5作為Web新標(biāo)準(zhǔn)，給Web前端制作帶來(lái)了技術(shù)變革。該文對(duì)HTML5視頻播放技術(shù)進(jìn)行了分析，特別是video標(biāo)記在視頻處理方面的用法，并結(jié)合HTML5的技術(shù)特點(diǎn)，研究如何將這些新特性應(yīng)用于視頻網(wǎng)站的設(shè)計(jì)與制作中。

關(guān)鍵詞：HTML5；視頻網(wǎng)站；設(shè)計(jì)

中圖分類號(hào)：TP37 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2015）12-0212-02

The Research and Design of Video Website HTML5

LIANG Xiao-ya，ZHANG Heng

（Software Engineering Career Academy，Wuhan 430050，China）

Abstract： HTML5 as a new standard Web， brought a change to the Web front-end production technology. The HTML5 video playback technology were analyzed， especially the usage of video markers in the video processing， and combined with the characteristics of HTML5 technology， study on how to design and manufacture of these new features is applied to the video website.

Key words：HTML5； video website； design

2012年12月17日，萬(wàn)維網(wǎng)聯(lián)盟（W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范完成。該規(guī)范是未來(lái)Web應(yīng)用的基礎(chǔ)，主要由HTML、CSS等組成，是一個(gè)完整的編程規(guī)范環(huán)境。新規(guī)范彌補(bǔ)了以前版本在多媒體和頁(yè)面交互等方面的缺陷，能夠很好的滿足目前Web開發(fā)和應(yīng)用中內(nèi)容多樣性、靈活的需求[1]。

在HTML5規(guī)范中，提供了很多新的元素和屬性，例如，實(shí)現(xiàn)了內(nèi)容與展示的分離；此外還提供了很多交互標(biāo)記，追加了本地?cái)?shù)據(jù)庫(kù)，改善了用戶的體驗(yàn)度；除此之外，HTML5在離線瀏覽、本地存儲(chǔ)等方面也有許多創(chuàng)新之處，基于上述特點(diǎn)，HTML5廣受知名IT企業(yè)的青睞，例如Adobe、蘋果、谷歌、微軟等均開始支持HTML5。HTML5被認(rèn)為能夠把Web帶入成熟的平臺(tái)，是將來(lái)互聯(lián)網(wǎng)發(fā)展的一個(gè)重要方向。目前，各大主流瀏覽器已經(jīng)開始支持HTML5[2]。

其中，新增加的video標(biāo)記，實(shí)現(xiàn)了對(duì)多媒體的支持，可以用于播放視頻流文件，并借助video API可以自定義HTML視頻控件，這就使得瀏覽器不必再使用插件方式來(lái)播放視頻，避免了插件的影響；本文通過對(duì)該標(biāo)記的技術(shù)特點(diǎn)進(jìn)行分析，研究如何將其應(yīng)用于視頻網(wǎng)站的設(shè)計(jì)中。

1 video標(biāo)記

在HTML5中實(shí)現(xiàn)視頻播放，需要在頁(yè)面文件中，需要顯示視頻的位置使用video標(biāo)記，語(yǔ)法如下[3]：

該標(biāo)記可以在頁(yè)面上直接顯示視頻播放控件。其中添加controls屬性來(lái)提供視頻播放的控制功能。width和height屬性可以設(shè)置視頻在頁(yè)面上顯示的寬度和高度。如果瀏覽器不支持video標(biāo)記，提示信息可以放入標(biāo)記之間，瀏覽時(shí)會(huì)把提示信息顯示在video所在的位置[4]。

1.1 video 標(biāo)記的屬性

下面對(duì)HTML5的新標(biāo)記video相關(guān)屬性的用法進(jìn)行詳細(xì)介紹，常用屬性有6個(gè)[5]。

1.1.1 src屬性

用于設(shè)置視頻文件地址，并可以和另外兩個(gè)屬性搭配使用[6]：

1）type屬性，指定src屬性視頻的類型。

2）media屬性，默認(rèn)值為all，表示支持所有視頻文件。該屬性表示媒體在何種媒介中使用，可以不設(shè)置該屬性。

1.1.2 preload屬性[7]

該屬性定義視頻文件是否要進(jìn)行預(yù)加載處理。在標(biāo)記中若設(shè)置了該屬性，在頁(yè)面加載時(shí)會(huì)自動(dòng)加載視頻，準(zhǔn)備播放。若標(biāo)記中同時(shí)設(shè)置了"autoplay"屬性，則該屬性無(wú)效。

1.1.3 loop屬性

屬性值是BOOL型[8]。設(shè)置是否要循環(huán)播放視頻文件。

1.1.4 autoplay屬性

屬性值是BOOL型。如果video標(biāo)記添加了該屬性并設(shè)置為true，表示頁(yè)面將自動(dòng)播放視頻文件，否則表示視頻不自動(dòng)播放。

1.1.5 width屬性與height屬性

兩個(gè)外觀屬性，width屬性設(shè)置video標(biāo)記的寬度，height屬性設(shè)置video標(biāo)記的高度。

1.1.6 controls屬性[9]

如果設(shè)置了該屬性，video標(biāo)記會(huì)顯示視頻控制按鈕，包含播放按鈕，全屏控制，音量調(diào)整按鈕。

1.2 video 標(biāo)記的基本用法

<！DOCTYPE HTML>

當(dāng)前瀏覽器無(wú)法顯示該視頻，請(qǐng)升級(jí)至最新版。

網(wǎng)頁(yè)運(yùn)行后，video標(biāo)記的顯示效果如圖1所示：

上述網(wǎng)頁(yè)在IE中打開后，會(huì)馬上加載視頻文件，并自動(dòng)播放該文件。當(dāng)播放結(jié)束后，頁(yè)面會(huì)立即重新播放。Video標(biāo)記語(yǔ)法還可以用子標(biāo)記source元素來(lái)指定視頻源文件。每個(gè)source元素可以設(shè)置獨(dú)立的視頻源文件，source元素的個(gè)數(shù)不受限制。語(yǔ)法格式如下所示：

當(dāng)前瀏覽器無(wú)法顯示該視頻，請(qǐng)升級(jí)至最新版。

此例中，video標(biāo)記沒有設(shè)置src屬性，但添加了兩個(gè)source元素。source元素設(shè)置源文件分別為"1.avi"與"1.mp4"，網(wǎng)頁(yè)將自動(dòng)加載第一個(gè)能夠被識(shí)別的文件格式。

2 視頻網(wǎng)站設(shè)計(jì)

視頻網(wǎng)站將以HTML5的新標(biāo)記video為基礎(chǔ)，保證視頻網(wǎng)站實(shí)現(xiàn)起來(lái)簡(jiǎn)潔，高效。此外，網(wǎng)站設(shè)計(jì)將按照網(wǎng)頁(yè)設(shè)計(jì)的基本原則，以用戶需求為基礎(chǔ)，充分尊重用戶的使用習(xí)慣，同時(shí)還應(yīng)具有使用簡(jiǎn)便、交互友好和前瞻性等特征。而基于HTML5的視頻網(wǎng)站能夠很好的滿足上述需要。

目前，HTML5技術(shù)不僅具有先進(jìn)性，而且還能體現(xiàn)以用戶為中心的網(wǎng)站設(shè)計(jì)理念。普通用戶無(wú)需像傳統(tǒng)視頻網(wǎng)站那樣，安裝視頻插件來(lái)完成視頻播放，而只需用一個(gè)支持HTML5的瀏覽器，就能夠直接播放視頻，獲得更佳的用戶體驗(yàn)[10]。

通過分析設(shè)計(jì)，本文研究的視頻網(wǎng)站采用B/S三層架構(gòu)模式，分為數(shù)據(jù)層、業(yè)務(wù)邏輯層和表示層。通過分層劃分，可以降低網(wǎng)站開發(fā)的復(fù)雜度，更好的控制進(jìn)度，維護(hù)與測(cè)試也更方便，同時(shí)提高了網(wǎng)站的可擴(kuò)展性。該視頻網(wǎng)站分為三個(gè)主要模塊，分別為：數(shù)據(jù)提供模塊、后臺(tái)管理模塊和前端展示模塊。

數(shù)據(jù)提供模塊，主要提供流媒體數(shù)據(jù)服務(wù)，響應(yīng)用戶的請(qǐng)求，提供視頻播放所需的數(shù)據(jù)。首先按規(guī)定流程處理各種視頻數(shù)據(jù)源：對(duì)于采集來(lái)的直播型數(shù)據(jù)源，需要進(jìn)行數(shù)據(jù)格式的轉(zhuǎn)換，將數(shù)據(jù)編碼成H.264格式和MP4音頻的格式，再采用加文件頭的形式封裝成MPEG-2 TS文件后轉(zhuǎn)入流分割器中進(jìn)行邏輯處理，得到的文件會(huì)按照10秒一段的標(biāo)準(zhǔn)進(jìn)行分割，并生成分割文件的索引。隨著視頻數(shù)據(jù)的不斷增加，索引數(shù)據(jù)也要同步進(jìn)行更新維護(hù)；然后以服務(wù)形式供Web模塊來(lái)調(diào)用這些處理好的視頻文件。

后臺(tái)管理模塊主要對(duì)保存在服務(wù)器上的視頻文件進(jìn)行維護(hù)和管理，主要包括視頻文件的上傳審核、刪除、權(quán)限分配等功能。

前端展示模塊，采用HTML5技術(shù)，特別是video標(biāo)記來(lái)完成視頻在頁(yè)面上的顯示。通過頁(yè)面編程控制和URL 地址來(lái)調(diào)用視頻的索引文件，然后根據(jù)索引文件來(lái)查找視頻文件在服務(wù)器上的位置。

以上三個(gè)模塊，相互配合，共同完成視頻的所有服務(wù)和反饋。為用戶提供了良好的視頻服務(wù)平臺(tái)。用戶可以隨時(shí)瀏覽視頻節(jié)目信息，選擇自己喜愛的視頻節(jié)目。

3 結(jié)束語(yǔ)

HTML5作為一個(gè)推出不久的Web標(biāo)準(zhǔn)規(guī)范，具有很多新的功能和特性，更進(jìn)一步的增強(qiáng)了網(wǎng)頁(yè)的性能和展示體驗(yàn)，特別是在三維、圖形和特效方面改進(jìn)明顯[11]。隨著互聯(lián)網(wǎng)技術(shù)的進(jìn)步，網(wǎng)絡(luò)交互的內(nèi)容變得越來(lái)越豐富，迫切需要一種新標(biāo)準(zhǔn)與當(dāng)前網(wǎng)頁(yè)應(yīng)用需求相適應(yīng)。HTML5很好的滿足了這一需求。它改變了HTML前幾個(gè)版本的設(shè)計(jì)習(xí)慣，顯著減少了網(wǎng)頁(yè)開發(fā)的工作量，并提供了更優(yōu)秀的圖形和特效體驗(yàn)。

本文探討與總結(jié)了傳統(tǒng)視頻網(wǎng)站存在的不足，討論了采用HTML5技術(shù)解決視頻網(wǎng)站中存在的若干主要問題，對(duì)HTML5視頻網(wǎng)站的整體框架結(jié)構(gòu)、功能模塊等進(jìn)行了深入的探討和設(shè)計(jì)，并進(jìn)行了仔細(xì)的研究。

參考文獻(xiàn)：

[1]Rob Hawkes.HTML5 Canvas基礎(chǔ)教程[M]. 周廣新， 譯.北京： 人民郵電出版社， 2012.

[2] Butler. Android： Changing the Mobile Landscape[J]. Pervasive Computing. 2011， 10（1）：4-7.

[3] Wu Jinfei，Liu Hai. The study of configuration software and management information systems integration[C]// 2010 Interna tional Conference on Computer Design and Applications （ICCDA）. 2010：144-147.

[4] 梁洪波. 基于代理服務(wù)的HTML5視頻網(wǎng)站訪問方法研究[J]. 電腦知識(shí)與技術(shù)， 2012（15）： 3514-3527.

[5] Peter Lubbrs. HTML5高級(jí)程序設(shè)計(jì)[M]. 李杰， 譯. 北京： 人民郵電出版社， 2011.

[6] Tracy. Mobile Application Development Experiences on Apple's iOS and Android OS[J]. Potentials. 2012， 31（4）： 30-34.

[7] Gossweiler， McDonough， Lin， et al. Argos： Building a Web-Centric Application Platform on Top of Androidf [J]. Pervasive Computing. 2011， 10（4）： 10-14.

[8] Russ Basiura. ASP.NET Web服務(wù)高級(jí)編程[M]. 楊浩， 譯. 北京： 清華大學(xué)出版社， 2003（2）.

[9] Gavalas， Damianos， Economou. Development Platforms for Mobile Applications： Status and Trends[J]. Software. 2011， 28（1）： 77-86.

[10] Liu Yougui， Bai Baoxing. Research on GPRS vehicle location network service system[C]. 2010 International Conference on Computer， Mechatronics， Control and Electronic Engineering （CMCE）. 2010： 401-404.

[11]俞華鋒. 基于HTML5的網(wǎng)頁(yè)設(shè)計(jì)與實(shí)現(xiàn)[J]. 科技信息， 2012（29）： 115-116.