解決audio和video在手機端無法自動播放問題


各大瀏覽器都為了節省流量,做出了優化,在用戶沒有行為動作時(交互)不予許自動播放

<audio src="music/bg.mp3" autoplay loop controls>你的瀏覽器還不支持哦</audio>
<audio controls="controls"> <source src="music/bg.ogg" type="audio/ogg"></source> <source src="music/bg.mp3" type="audio/mpeg"></source> 優先播放音樂bg.ogg,不支持在播放bg.mp3 </audio>
//JS綁定自動播放(操作window時,播放音樂)
$(window).one('touchstart', function(){
    music.play();
})

//微信下兼容處理
document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);

//注意
//1.audio元素的autoplay屬性在IOS及Android上無法使用,在PC端正常;
//2.audio元素沒有設置controls時,在IOS及Android會占據空間大小,而在PC端Chrome是不會占據任何空間;
//3.注意不要遺漏微信的兼容處理需要引用微信JS;

 


免責聲明!

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



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