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

发布时间：2018-06-22 05:44

本文选题：媒体查询 + 流动布局　；参考：《现代电子技术》2016年24期

【摘要】：针对电脑版网页中视频元素直接显示在移动设备上时视频比例无法自动伸缩、远程视频无法播放等缺点,提出基于自适应网页设计技术的视频自适应方法。依据本地视频和远程视频的各自特点,设计不同的自适应方案:本地视频的自适应分别采用媒体查询技术和流动布局技术实现;远程视频的自适应则分别采用FitVids插件和流动布局技术实现。分别对页面布局效果和页面加载时间进行了测试:通过在Chrome浏览器下使用扩展程序Window Resizer对页面布局效果进行测试,结果表明,相比非自适应网页,自适应网页在不同分辨率下页面内容显示更合理;采用WebPagetest对页面加载时间进行了测试,结果表明,与非自适应网页相比,自适应网页的页面加载时间更短,页面响应速度更快。
[Abstract]:In view of the disadvantages of the video elements in the computer version of the web page being displayed directly on the mobile device, the proportion of video can not be automatically scaled and the remote video can not be played, a video adaptive method based on adaptive web page design technology is proposed. According to the characteristics of local video and remote video, different adaptive schemes are designed: the adaptation of local video is implemented by media query technology and flow layout technology respectively; The adaptation of remote video is realized by FitVids plug-in and flow layout technology respectively. The page layout effect and page loading time are tested respectively. The page layout effect is tested by using window Resizer, an extender in Chrome browser. The results show that, compared with non-adaptive web pages, The results show that the page loading time of adaptive web pages is shorter than that of non-adaptive web pages, and the page response speed is faster than that of non-adaptive web pages.
【作者单位】：西安交通大学数据与信息中心;
【基金】：教育部科技发展中心专项(2011jybkjfz01)
【分类号】：TP393.092

【参考文献】