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

视频自适应技术在网页设计中的实现 　　摘 要： 针对电脑版网页中视频元素直接显示在移动设备上时视频比例无法自动伸缩、远程视频无法播放等缺点，提出基于自适应网页设计技术的视频自适应方法。依据本地视频和远程视频的各自特点，设计不同的自适应方案：本地视频的自适应分别采用媒体查询技术和流动布局技术实现；远程视频的自适应则分别采用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]的设计方式。该方法能够依据屏幕尺寸，为移动设备“定制”网站内容，其设计理念是：集中创建页面的图片排版大小，可以智能地根据用