解決HTML5中的audio在手機(jī)端和微信端的不能自動播放問題
發(fā)布時間:2019-11-04 12:50:27 作者:佚名
我要評論

這篇文章主要介紹了解決HTML5中的audio在手機(jī)端和微信端的不能自動播放問題,需要的朋友可以參考下
再做H5頁面的時候,發(fā)現(xiàn)audio在手機(jī)端和微信端添加了autoplay以后還是不可以自動播放,這是因?yàn)槭謾C(jī)端為了節(jié)約流浪所設(shè)置的
通常解決方法是給一個交互事件:
標(biāo)簽:
<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)聽,當(dāng)瀏覽器打開頁面時,觸摸屏幕觸發(fā)事件,進(jìn)行音頻播放 document.addEventListener('touchstart', function () { function audioAutoPlay() { var audio = document.getElementById('audio'); audio.play(); } audioAutoPlay(); });
還有一種針對蘋果的手機(jī)微信端的解決方法
第一步:引入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)定的情況下是可以自動播放的。
總結(jié)
以上所述是小編給大家介紹的解決HTML5中的audio在手機(jī)端和微信端的不能自動播放問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
html5 video全屏播放/自動播放的實(shí)現(xiàn)示例
這篇文章主要介紹了html5 video全屏播放/自動播放的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來2020-08-06- 這篇文章主要介紹了html5中嵌入視頻自動播放的問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起2020-05-25
- 這篇文章主要介紹了html5自動播放mov格式視頻的實(shí)例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-14
- 這篇文章主要介紹了HTML5 解決蘋果手機(jī)不能自動播放音樂問題的相關(guān)資料,需要的朋友可以參考下2017-12-27
- 這篇文章主要介紹了有關(guān)HTML5中背景音樂的自動播放功能的相關(guān)資料,需要的朋友可以參考下2017-10-16
HTML5頁面音視頻在微信和app下自動播放的實(shí)現(xiàn)方法
現(xiàn)在大部分的H5頁面都有實(shí)現(xiàn)播放背景音樂,播放視頻功能。那怎么實(shí)現(xiàn)自動播放呢?下面小編給大家?guī)砹薍TML5頁面音視頻在微信和app下自動播放的實(shí)現(xiàn)方法2016-10-20- 本文給大家分享三種常規(guī)的方法創(chuàng)建自動播放的audio對象,就每種方式通過實(shí)例代碼給大家介紹的非常詳細(xì),對html5音頻自動播放相關(guān)知識感興趣的朋友一起看看吧2021-06-21