关于微信H5自动播放视频-canvas实现逐帧动画效果加音频

项目需求

   用户进入页面自动播放一段小视频 

解决方案一

   利用 JS reload 之后执行 video.play 和 video  autoplay 都只能在WEB段实现, 但是到了移动端就执行不了

   因为项目应用了微信的JS-SDK,所以只需要做兼容微信内置浏览器

   想到微信JS-sdk 的WeixinJSBridgeReady 的方式 执行

document.addEventListener("WeixinJSBridgeReady", function () { 
        document.getElementById('video').play();
}, false); 

 Android 还是无法自动播放,   可以参考http://www.xyhtml5.com/3252.html

解决方案2

 使用GIF代替视频, 在利用audio音频播放 

 这个方案IOS,Android都可以实现,但是存在问题就是加载图片慢,有延迟,而且跟播放无法与音频同步

解决方案3

 刚好腾讯发布了一个吃鸡游戏推广活动页面 可以参考

https://game.weixin.qq.com/cgi-bin/h5/kvpage/old/pandora/tusvbh3njk.html?noticeid=90135809&act_id=10000312#wechat_redirect 

 这个页面首页就是用canvas实现逐帧动画效果,通过一个按钮引导用户播放视频

 其实我觉得腾讯在这步也已经想到上面提到的方案1, 所以通过引导播放视频,而不是直接自动播放视频

于是我就模仿了腾讯吃鸡的页面做了一个canvas实现逐帧动画效果加音频的页面

可以给大家参考 https://github.com/xiezhouhuang/canvas-animation

如果大家有更好的方案也可以提出来,一起研究