项目需求
用户进入页面自动播放一段小视频
解决方案一
利用 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
如果大家有更好的方案也可以提出来,一起研究