html5背景视频使用总结

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插件进行设置。