解決audio、video視頻在ios微信瀏覽器中不能自動播放的問題

由於Android,IOS移動端的瀏覽器以及微信自帶的瀏覽器爲了用戶更好的體驗,規定不自動播放音頻視頻,默認屏蔽了autoplay,如果要想達到自動播放效果,需要單獨處理

解決方法一:

在頁面中引入微信插件:

<srcipt src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

頁面中添加html代碼:

<audio controls="" id="audio" loop=""><source src="/img/mp3/test.mp3" type="audio/ogg" /> <source src="/img/mp3/test.mp3" type="audio/mpeg" /> 您的瀏覽器不支持 audio 元素。</audio>

在處理邏輯上添加如下代碼

document.addEventListener("WeixinJSBridgeReady",function() { 
	document.getElementById('audio').play(); 
}, false);

解決方法二:
因爲ios中明確的指出等待用戶的交互動作後才能播放video,也就是說沒有得到用戶的action就播放的話會被safri攔截

//--創建觸摸監聽,當瀏覽器打開頁面時,觸摸屏幕觸發事件,進行音頻播放
document.addEventListener('touchstart', function () {
        function audioAutoPlay() {
            var audio = document.getElementById('audio');
                audio.play();
        }
        audioAutoPlay();
 });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章