項(xiàng)目需求

? ?用戶進(jìn)入頁面自動(dòng)播放一段小視頻?

解決方案一

? ?利用 JS reload 之后執(zhí)行 video.play 和 video? autoplay 都只能在WEB段實(shí)現(xiàn), 但是到了移動(dòng)端就執(zhí)行不了

? ?因?yàn)轫?xiàng)目應(yīng)用了微信的JS-SDK,所以只需要做兼容微信內(nèi)置瀏覽器

? ?想到微信JS-sdk 的WeixinJSBridgeReady 的方式 執(zhí)行

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

?Android 還是無法自動(dòng)播放,? ?可以參考http://www.xyhtml5.com/3252.html

解決方案2

?使用GIF代替視頻, 在利用audio音頻播放?

?這個(gè)方案IOS,Android都可以實(shí)現(xiàn),但是存在問題就是加載圖片慢,有延遲,而且跟播放無法與音頻同步

解決方案3

?剛好騰訊發(fā)布了一個(gè)吃雞游戲推廣活動(dòng)頁面 可以參考

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

?這個(gè)頁面首頁就是用canvas實(shí)現(xiàn)逐幀動(dòng)畫效果,通過一個(gè)按鈕引導(dǎo)用戶播放視頻

?其實(shí)我覺得騰訊在這步也已經(jīng)想到上面提到的方案1, 所以通過引導(dǎo)播放視頻,而不是直接自動(dòng)播放視頻

于是我就模仿了騰訊吃雞的頁面做了一個(gè)canvas實(shí)現(xiàn)逐幀動(dòng)畫效果加音頻的頁面

可以給大家參考?https://github.com/xiezhouhuang/canvas-animation

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

總結(jié)

以上是生活随笔為你收集整理的关于微信H5自动播放视频-canvas实现逐帧动画效果加音频的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。