視頻自適應技術在網頁設計中的實現

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

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

關鍵詞： 媒體查詢； 流動布局； FitVids； 自適應網頁設計

中圖分類號： 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 引 言

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

1 自適應網頁設計

自適應網頁設計包括以下四個關鍵技術。

1.1 媒體查詢

媒體查詢（Media Query）是指通過不同的元素類型和條件定義樣式表規則，使CSS3可以更精確地作用于不同的元素類型和同一元素的不同條件，能夠將頁面內容不經修改而直接顯示在特定尺寸的設備屏幕上[2]。

1.2 流動布局

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

1.3 HTML5和CSS3

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

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

2 技術實現

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

2.1 本地視頻自適應方法

2.1.1 媒體查詢技術

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

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

2.1.2 流動布局技術

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

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

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

video {

max?width： 100%；

height： auto；

}

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

2.2 遠程視頻自適應方法

上述方法對于由

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

2.2.1 借助FitVids插件

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

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

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

...

2.2.2 流動布局技術

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

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，但是目前大部分的視頻文件被創建成寬屏模式，比例為16∶9。上述代碼中，寬高比為640∶480（即4∶3），相應的padding?bottom的值為75%。當視頻文件的寬高比為16∶9時，需要將padding?bottom的值修改為56.25%，同時修改