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

最新推荐文章于 2025-05-27 11:58:44 发布

原创最新推荐文章于 2025-05-27 11:58:44 发布 · 6.9k 阅读

CC 4.0 BY-SA版权

文章标签：

23 篇文章

订阅专栏

项目需求

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

解决方案一

利用 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

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