html5背景视频使用总结
2016-04-23 12:52
375 查看
1、尽量把视频素材压缩,即使高清的背景视频看上去极具诱惑力,但是加载缓慢给人的糟糕体验还是让你觉得会得不偿失的。建议使用1080/720p分辨率,750-1250数据数率,每秒24-25帧的素材。
2、在你视频后面加一个设置了对定位的半透明div,然后你还需要给这个div设置pointer-events: none;以保证对视频的有效点击。这样可以掩盖你的视频因质量不佳或者质量太好而抖动的问题。附上透明层的png素材下载链接http://html5backgroundvideos.com/pattern-overlays/。
3、控制你的背景视频的大小在2-3mb,时间在12-30秒的视频。没人会愿意花费几十兆流量去你的网站里看个好几分钟的背景视频。
4、避免过度和快速的移动。因为背景视频仅仅是背景视频,这样会影响用户访问该网站的意图。
5、与前景要有鲜明的对比。让用户能轻松的阅读网页的内容,不要让文本与背景难以分辨。
6、要兼容移动设备,安卓和ios设备都不能很好的兼容h5的背景视频,iOS会打开多媒体播放器来播放该背景视频。这时我们可以使用css来隐藏掉该视频,或者默认使用js来验证用户代理来完全清楚该视频。
7、不要一直重复播放,如果你一直播放的话就会占用CPU从而降低加载页面的速率。可以设置loop为2-3次,或者用写一段js脚本控制
视频在n秒后停止。推荐使用jQuery Background Video插件中的pause after属性进行控制。
8、设置一个停止和播放按钮。也可以使用jQuery Background Video插件进行设置。
9、对vedio元素设置合适的透明度淡入淡出特效。在暂停时设置淡出,播放时淡入。也可以使用jQuery Background Video插件进行设置。
2、在你视频后面加一个设置了对定位的半透明div,然后你还需要给这个div设置pointer-events: none;以保证对视频的有效点击。这样可以掩盖你的视频因质量不佳或者质量太好而抖动的问题。附上透明层的png素材下载链接http://html5backgroundvideos.com/pattern-overlays/。
3、控制你的背景视频的大小在2-3mb,时间在12-30秒的视频。没人会愿意花费几十兆流量去你的网站里看个好几分钟的背景视频。
4、避免过度和快速的移动。因为背景视频仅仅是背景视频,这样会影响用户访问该网站的意图。
5、与前景要有鲜明的对比。让用户能轻松的阅读网页的内容,不要让文本与背景难以分辨。
6、要兼容移动设备,安卓和ios设备都不能很好的兼容h5的背景视频,iOS会打开多媒体播放器来播放该背景视频。这时我们可以使用css来隐藏掉该视频,或者默认使用js来验证用户代理来完全清楚该视频。
7、不要一直重复播放,如果你一直播放的话就会占用CPU从而降低加载页面的速率。可以设置loop为2-3次,或者用写一段js脚本控制
视频在n秒后停止。推荐使用jQuery Background Video插件中的pause after属性进行控制。
8、设置一个停止和播放按钮。也可以使用jQuery Background Video插件进行设置。
9、对vedio元素设置合适的透明度淡入淡出特效。在暂停时设置淡出,播放时淡入。也可以使用jQuery Background Video插件进行设置。
相关文章推荐
- html5的关于布局的研究(1)
- 使用HTML5中的classList操作CSS类
- h5上传图片及预览
- webkit移动开发笔记:html5中video与audio标签之无法自动播放的audio元素
- 解决C:\fakepath路径加密问题,图片上传之前的预览功能的实现,html5 实现图片预览功能
- HTML5 图形组件-拓扑图等
- 浅谈:html5和html的区别
- 最全html5 meta设置详解 (转)
- H5在线编辑器优化总结
- 提升html5的性能体验系列之四使用原生ui
- 提升html5的性能体验系列之三流畅下拉刷新
- 提升html5的性能体验系列之二列表流畅滑动
- 提升html5的性能体验系列之一避免切页白屏
- h5屏蔽页面中数字当手机号的问题
- 【F2E】viewport 模板(通用 HTML5 初始 *.html 文件)
- HTML5之Canvas绘图(二) ——应用篇之七巧板
- 移动前端头部标签(HTML5 head meta)
- HTML5之Canvas绘图(一) ——基础篇
- 关于H5 audio标签的个人使用心得
- HTML5 获取用户经纬度及距离计算公式