解决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();
 });
  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值