項目需求

? ?用戶進入頁面自動播放一段小視頻?

解決方案一

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。