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

• 作者: 冯兴利 洪丹丹 罗军锋 锁志海
• 来源期刊: 现代电子技术
• 关键词: 媒体查询 流动布局 FitVids 自适应网页设计
• 年，卷（期）: 2016,（24）
• 所属期刊栏目: 计算机应用技术
• 页码范围: 18-21
• 页数: 4页
• 分类号: TN948.6-34|TP393.0
• 语种: 中文
• DOI: 10.16652/j.issn.1004-373x.2016.24.005

摘要

针对电脑版网页中视频元素直接显示在移动设备上时视频比例无法自动伸缩、远程视频无法播放等缺点，提出基于自适应网页设计技术的视频自适应方法。依据本地视频和远程视频的各自特点，设计不同的自适应方案：本地视频的自适应分别采用媒体查询技术和流动布局技术实现；远程视频的自适应则分别采用FitVids插件和流动布局技术实现。分别对页面布局效果和页面加载时间进行了测试：通过在Chrome浏览器下使用扩展程序Window Resizer对页面布局效果进行测试，结果表明，相比非自适应网页，自适应网页在不同分辨率下页面内容显示更合理；采用WebPagetest对页面加载时间进行了测试，结果表明，与非自适应网页相比，自适应网页的页面加载时间更短，页面响应速度更快。

作者信息

序号	姓名	单位	发文数	被引次数	H指数	G指数
1	锁志海	西安交通大学数据与信息中心	56	567	12.0	22.0
2	罗军锋	西安交通大学数据与信息中心	20	117	6.0	10.0
3	洪丹丹	西安交通大学数据与信息中心	13	57	4.0	7.0
4	冯兴利	西安交通大学数据与信息中心	16	86	4.0	9.0