馮興利+洪丹丹+羅軍鋒+鎖志海

摘 要： 針對電腦版網(wǎng)頁中視頻元素直接顯示在移動設(shè)備上時視頻比例無法自動伸縮、遠(yuǎn)程視頻無法播放等缺點(diǎn)，提出基于自適應(yīng)網(wǎng)頁設(shè)計技術(shù)的視頻自適應(yīng)方法。依據(jù)本地視頻和遠(yuǎn)程視頻的各自特點(diǎn)，設(shè)計不同的自適應(yīng)方案：本地視頻的自適應(yīng)分別采用媒體查詢技術(shù)和流動布局技術(shù)實現(xiàn)；遠(yuǎn)程視頻的自適應(yīng)則分別采用FitVids插件和流動布局技術(shù)實現(xiàn)。分別對頁面布局效果和頁面加載時間進(jìn)行了測試：通過在Chrome瀏覽器下使用擴(kuò)展程序Window Resizer對頁面布局效果進(jìn)行測試，結(jié)果表明，相比非自適應(yīng)網(wǎng)頁，自適應(yīng)網(wǎng)頁在不同分辨率下頁面內(nèi)容顯示更合理；采用WebPagetest對頁面加載時間進(jìn)行了測試，結(jié)果表明，與非自適應(yīng)網(wǎng)頁相比，自適應(yīng)網(wǎng)頁的頁面加載時間更短，頁面響應(yīng)速度更快。

關(guān)鍵詞： 媒體查詢； 流動布局； FitVids； 自適應(yīng)網(wǎng)頁設(shè)計

中圖分類號： TN948.6?34； TP393.0 文獻(xiàn)標(biāo)識碼： A 文章編號： 1004?373X（2016）24?0018?04

Application of video adaptive technology in Web design

FENG Xingli， HONG Dandan， LUO Junfeng， SUO Zhihai

（Data and Information Center， Xian Jiaotong University， Xian 710049， China）

Abstract： In order to overcome the disadvantages that the video proportion can not be stretched automatically and the remote video can not be played back， the video adaptive method based on adaptive web design technology is proposed. According to the characteristics of local video and remote video poor， the corresponding adaptive schemes were designed. The medium query and flow layout technology are adopted for the self?adaption of the local video， and FitVids plug?ins and flow layout technology are used for that of the remote video. The page layout effect and page loading time were tested respectively： The page layout effect tested by Window Resizer in Chrome browser shows that the content of adaptive webpage is more reasonable than that of the non?adaptive webpage at different resolution.The test results of the page loading time tested by WebPagetest show that， compared to non?responsive web， the loading time of the adaptive webpage is shorter and its response time is faster.

Keywords： medium query； flow layout； FitVids； responsive web design

0 引 言

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，移動網(wǎng)絡(luò)通信技術(shù)的發(fā)展也日新月異。相比桌面式電腦，移動設(shè)備因攜帶輕便、可隨時隨地上網(wǎng)等優(yōu)勢使得原來很多用戶使用智能手機(jī)、iPad、平板電腦等移動設(shè)備上網(wǎng)。但由于移動設(shè)備種類繁多、屏幕分辨率不多樣化、操作系統(tǒng)不同等原因，導(dǎo)致同一個網(wǎng)站無法在不同設(shè)備上完美地呈現(xiàn)出來。為此，美國網(wǎng)頁設(shè)計工程師Ethan Marcotte于2010年提出了自適應(yīng)網(wǎng)頁設(shè)計（Responsive Web Design，RWD）[1]的設(shè)計方式。該方法能夠依據(jù)屏幕尺寸，為移動設(shè)備“定制”網(wǎng)站內(nèi)容，其設(shè)計理念是：集中創(chuàng)建頁面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進(jìn)行相對應(yīng)的布局調(diào)整。

1 自適應(yīng)網(wǎng)頁設(shè)計

自適應(yīng)網(wǎng)頁設(shè)計包括以下四個關(guān)鍵技術(shù)。

1.1 媒體查詢

媒體查詢（Media Query）是指通過不同的元素類型和條件定義樣式表規(guī)則，使CSS3可以更精確地作用于不同的元素類型和同一元素的不同條件，能夠?qū)㈨撁鎯?nèi)容不經(jīng)修改而直接顯示在特定尺寸的設(shè)備屏幕上[2]。

1.2 流動布局

流動布局（Fluid Layout）采用百分比來確定元素的寬度做到頁面元素的普遍自適應(yīng)，可以使頁面普遍適應(yīng)各種分辨率不同的設(shè)備[3]。

1.3 HTML5和CSS3

HTML5的簡易性、視頻/音頻支持、代碼清晰、存儲靈活、人機(jī)交互性更好等特性使其在網(wǎng)頁設(shè)計中的優(yōu)勢更加明顯，更適合移動APP開發(fā)[4]。CSS3在減少開發(fā)維護(hù)成本、提高頁面性能、縮小網(wǎng)頁文件、提升網(wǎng)頁加載速度等方面的優(yōu)勢使其被大量運(yùn)用到網(wǎng)頁設(shè)計中[5]。HTML5和CSS3結(jié)合使用能夠支持大多數(shù)瀏覽器，甚至是低版本瀏覽器，使CSS3的使用更加靈活、豐富[6]，能更好地支持自適應(yīng)網(wǎng)頁的設(shè)計開發(fā)。

本文就這些問題做了一些探討，同時針對自適應(yīng)網(wǎng)頁中的視頻元素，提出了不同視頻文件的多個自適應(yīng)方法。本文通過使用Google Chrome 攜帶的擴(kuò)展程序Window Resizer 模擬不同尺寸的屏幕分辨率來測試頁面布局效果和網(wǎng)頁功能，使用網(wǎng)站性能測試軟件WebPagetest對頁面首次被訪問時的加載時間進(jìn)行測試，并選取iPhone 6（IOS 9操作系統(tǒng)）模擬移動客戶端瀏覽器，對實例中自適應(yīng)網(wǎng)頁和對應(yīng)的非自適應(yīng)網(wǎng)頁加載時間進(jìn)行測試并對比分析。

2 技術(shù)實現(xiàn)

在網(wǎng)頁設(shè)計中，除了文字、圖片等頁面元素以外，還有視頻，而視頻的自適應(yīng)相比圖片要復(fù)雜很多。有些視頻文件是本地的，而有些視頻文件則是先上傳到網(wǎng)站（如優(yōu)酷、騰訊、新浪等視頻網(wǎng)站）后，再用鏈接的方式加入到Web網(wǎng)頁中的遠(yuǎn)程視頻文件，這兩種視頻的自適應(yīng)方法亦不相同。

2.1 本地視頻自適應(yīng)方法

2.1.1 媒體查詢技術(shù)

通過將媒體查詢規(guī)則加在相應(yīng)的視頻文件上，當(dāng)設(shè)備與這個媒體查詢規(guī)則相匹配時，可以加載這個視頻：

當(dāng)設(shè)備最大寬度為640 px時，abc?small.mp4被加載，如圖1所示；否則abc.mp4文件被加載，如圖2所示。該代碼適用于Chrome，Safari，IE 9和Opera瀏覽器。

2.1.2 流動布局技術(shù)

除了使用媒體查詢，還可以使用CSS為視頻文件指定流媒體尺寸，代碼如下：

有些用戶可能因網(wǎng)速較慢，想節(jié)省帶寬而不希望下載過大的視頻文件，所以代碼中使用preload="none"，即不提前加載視頻文件。

為了保證視頻能夠適應(yīng)屏幕設(shè)備大小，將HTML5的video元素及max?width屬性加入到CSS中，即可完成自適應(yīng)網(wǎng)頁中視頻的縮放。代碼如下：

video {

max?width： 100%；

height： auto；

}

如果視頻文件很大，使用media屬性是一個非常好的辦法；而當(dāng)視頻文件不大時，則使用CSS比較好。

2.2 遠(yuǎn)程視頻自適應(yīng)方法

上述方法對于由

對于這個問題，有很多種辦法可以解決，此處采用以下兩種辦法分別實現(xiàn)。

2.2.1 借助FitVids插件

使用一個名為FitVids的插件實現(xiàn)[7]。首先需要引入一個jQuery庫，將其置于標(biāo)簽中，代碼如下：

而FitVids可從http：//fitvidsjs.com/下載。將下載到的fitvids.js引入到當(dāng)前頁面的 標(biāo)簽中，代碼如下：

最后用jQuery來指向包含特定視頻的元素。此處將該視頻用div標(biāo)記，其ID為#content，代碼如下：

...

2.2.2 流動布局技術(shù)

為保證遠(yuǎn)程視頻適應(yīng)容器寬度，必須先用

overflow： hidden；

}

.video?container iframe，

.video?container object，

.video?container video，

.video?container embed

{

position： absolute；

top： 0；

left： 0；

width： 100%；

height： 100%；

}

HTML代碼如下：

不同的視頻文件的寬高比例不同，標(biāo)準(zhǔn)視頻文件的寬高比是4∶3，但是目前大部分的視頻文件被創(chuàng)建成寬屏模式，比例為16∶9。上述代碼中，寬高比為640∶480（即4∶3），相應(yīng)的padding?bottom的值為75%。當(dāng)視頻文件的寬高比為16∶9時，需要將padding?bottom的值修改為56.25%，同時修改