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

    技术2022-07-15  94

    由于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(); });
    Processed: 0.015, SQL: 9