關於H5頁面音視頻在微信和app下自動播放


H5頁面音視頻自動播放

現在大部分的H5頁面都有實現播放背景音樂,播放視頻功能。那怎么實現自動播放呢?

純H5頁面在手機端中是無法實現自動播放,移動端瀏覽器大部分是禁用video和audio的autoplay功能
並且,很多移動瀏覽器也不支持首次js調用play方法進行播放(只有用戶手動點播放后暫停,然后用代碼進行play可以)。
這樣做主要是為了防止不必要的自動播放浪費流量。

以下代碼是實現用戶第一次觸摸后實現的播放和微信app下自動播放

 1 function autoPlayMusic() {
2
/* 自動播放音樂效果,解決瀏覽器或者APP自動播放問題 */ 3 function musicInBrowserHandler() { 4 musicPlay(true); 5 document.body.removeEventListener('touchstart', musicInBrowserHandler); 6 } 7 document.body.addEventListener('touchstart', musicInBrowserHandler); 8 /* 自動播放音樂效果,解決微信自動播放問題 */ 9 function musicInWeixinHandler() { 10 musicPlay(true); 11 document.addEventListener("WeixinJSBridgeReady", function () { 12 musicPlay(true); 13 }, false); 14 document.removeEventListener('DOMContentLoaded', musicInWeixinHandler); 15 } 16 document.addEventListener('DOMContentLoaded', musicInWeixinHandler); 17 } 18 function musicPlay(isPlay) { 19 var media = document.getElementById('myMusic'); 20 if (isPlay && media.paused) { 21 media.play(); 22 } 23 if (!isPlay && !media.paused) { 24 media.pause(); 25 } 26 }

 

以上僅供參考,望大神們幫忙修訂更好更全的辦法

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM