关于微信H5自动播放视频-canvas实现逐帧动画效果加音频
項(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Quartus II13.0的破解过程
- 下一篇: 2018 大数据学习入门必备规划