您好,登錄后才能下訂單哦!
小編給大家分享一下HTML5中audio在手機端和微信端不能自動播放怎么辦,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
再做H5頁面的時候,發(fā)現(xiàn)audio在手機端和微信端添加了autoplay以后還是不可以自動播放,這是因為手機端為了節(jié)約流浪所設(shè)置的
通常解決方法是給一個交互事件:
標簽:
<audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto">
該瀏覽器不支持audio屬性</audio>
解決方法:
//--創(chuàng)建頁面監(jiān)聽,等待微信端頁面加載完畢 觸發(fā)音頻播放 document.addEventListener('DOMContentLoaded', function () { function audioAutoPlay() { var audio = document.getElementById('audio'); audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); } audioAutoPlay(); }); //--創(chuàng)建觸摸監(jiān)聽,當瀏覽器打開頁面時,觸摸屏幕觸發(fā)事件,進行音頻播放 document.addEventListener('touchstart', function () { function audioAutoPlay() { var audio = document.getElementById('audio'); audio.play(); } audioAutoPlay(); });
還有一種針對蘋果的手機微信端的解決方法
第一步:引入js文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
第二步:配置文件
<script> function autoPlayVideo(){ wx.config({ debug:false, appId:"", timestamp:1, nonceStr:"", signature:"", jsApiList:[] }); wx.ready(function(){ var autoplayVideo=document.getElementById("audio"); autoplayVideo.play() }) }; autoPlayVideo(); </script>
這樣在網(wǎng)絡(luò)穩(wěn)定的情況下是可以自動播放的。
看完了這篇文章,相信你對“HTML5中audio在手機端和微信端不能自動播放怎么辦”有了一定的了解,如果想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。