解决audio、video视频在ios微信浏览器中不能自动播放的问题

解决audio、video视频在ios微信浏览器中不能自动播放的问题由于Android，IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验，规定不自动播放音频视频，默认屏蔽了autoplay，如果要想达到自动播放效果，需要单独处理解决方法一：在页面中引入微信插件：<srcipt src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"&g

趙小二啊

5738人浏览 · 2020-07-02 14:50:42

趙小二啊 · 2020-07-02 14:50:42 发布

由于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();
 });