您好,登錄后才能下訂單哦!
小編給大家分享一下HTML5中audio在手機端和微信端不能自動播放怎么辦,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
再做H5頁面的時候,發現audio在手機端和微信端添加了autoplay以后還是不可以自動播放,這是因為手機端為了節約流浪所設置的
通常解決方法是給一個交互事件:
標簽:
<audio loop src="/photo/aa.mp3" id="audio" autoplay preload="auto">
該瀏覽器不支持audio屬性</audio>
解決方法:
//--創建頁面監聽,等待微信端頁面加載完畢 觸發音頻播放 document.addEventListener('DOMContentLoaded', function () { function audioAutoPlay() { var audio = document.getElementById('audio'); audio.play(); document.addEventListener("WeixinJSBridgeReady", function () { audio.play(); }, false); } audioAutoPlay(); }); //--創建觸摸監聽,當瀏覽器打開頁面時,觸摸屏幕觸發事件,進行音頻播放 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>
這樣在網絡穩定的情況下是可以自動播放的。
看完了這篇文章,相信你對“HTML5中audio在手機端和微信端不能自動播放怎么辦”有了一定的了解,如果想了解更多相關知識,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。