H5 video标签采坑

最近公司项目一个页面放了很多视频，一开始以为除了页面加载会比较慢以外没想到video标签再不同的浏览器表现相差如此巨大。

首先解决页面加载过慢：

　　页面中图片及视频都采用懒加载来提高速度

 

safari浏览器不能自动播放

 添加 webkit-playsinline="true" playsinline="true"

　　<video ref="video" src="video.mp4" autoplay controls webkit-playsinline="true" playsinline="true">

　　　　your browser does not support the video tag

　　</video>

 

部分浏览器仍然不能播放：

　　

　　使用js调用play()方法

 

部分浏览器能够播放，但video脱离文档流

　　

　　使用canvas绘制video,并隐藏video标签

 

懒加载使用vue-awesome-swiper轮播插件两边空白

　　使用js重新设置两端图片src