視頻自適應(yīng)技術(shù)在網(wǎng)頁設(shè)計(jì)中的實(shí)現(xiàn)

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

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

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

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

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

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

1.1 媒體查詢

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

1.2 流動(dòng)布局

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

1.3 HTML5和CSS3

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

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

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

在網(wǎng)頁設(shè)計(jì)中，除了文字、圖片等頁面元素以外，還有視頻，而視頻的自適應(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è)備與這個(gè)媒體查詢規(guī)則相匹配時(shí)，可以加載這個(gè)視頻：

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

2.1.2 流動(dòng)布局技術(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屬性是一個(gè)非常好的辦法；而當(dāng)視頻文件不大時(shí)，則使用CSS比較好。

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

上述方法對(duì)于由

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

2.2.1 借助FitVids插件

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

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

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

...

2.2.2 流動(dòng)布局技術(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時(shí)，需要將padding?bottom的值修改為56.25%，同時(shí)修改