视频自适应技术在网页设计中的实现

冯兴利+洪丹丹+罗军锋+锁志海

摘 要： 针对电脑版网页中视频元素直接显示在移动设备上时视频比例无法自动伸缩、远程视频无法播放等缺点，提出基于自适应网页设计技术的视频自适应方法。依据本地视频和远程视频的各自特点，设计不同的自适应方案：本地视频的自适应分别采用媒体查询技术和流动布局技术实现；远程视频的自适应则分别采用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%，同时修改