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

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

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

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

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

1 自適應網(wǎng)頁設計

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

1.1 媒體查詢

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

1.2 流動布局

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

1.3 HTML5和CSS3

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

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

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

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

2.1 本地視頻自適應方法

2.1.1 媒體查詢技術(shù)

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

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

2.1.2 流動布局技術(shù)

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

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

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

video {

max?width： 100%；

height： auto；

}

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

2.2 遠程視頻自適應方法

上述方法對于由

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

2.2.1 借助FitVids插件

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

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

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

...

2.2.2 流動布局技術(shù)

為保證遠程視頻適應容器寬度，必須先用

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代碼如下：

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