iOS系统和微信中不支持audio自动播放问题的解决方法

2023-09-24 23:54:06 53

.pause{position:absolute;z-index:10000;bottom:10px;right:10px;} .pausea{width:30px;height:30px;background:url(http://mat1.gtimg.com/zj/maxbao/reai/imgs/units-icons.png)00no-repeat;display:block;background-size:90pxauto;} .pausea.on{-webkit-animation:reverseRotataZ1.2slinearinfinite} .pausea.off{} .pausespan{color:#fff;font-size:16px;position:absolute;left:-40px;top:5px;text-shadow:1px1px1px#000;letter-spacing:2px;-webkit-transition:all.2slinear;opacity:0;-webkit-transform:translateX(-20px)} .pausespan.z-show{opacity:1;-webkit-transform:translateX(0px)} .coffee-steam-box{-webkit-transform:translate(-40px,-40px)} @-webkit-keyframesreverseRotataZ{ 0%{ -webkit-transform:rotateZ(0deg) } 100%{ -webkit-transform:rotateZ(-360deg) } } .audio{position:absolute;z-index:10;visibility:hidden;opacity:0;left:0px;top:0px;width:100px;height:30px;}

//播放器 (function($){ $(document).ready(function(){ varmusicControl=function(obj){ varclassname=$.trim(obj.attr('class')); //alert(classname); if(classname=='on') { document.getElementById('audio').pause(); obj.removeClass('on').addClass('off'); obj.siblings('span').text('关闭'); $('.pausespan').addClass('z-show'); $('.music-icon').removeClass('active'); setTimeout(function(){ $('.pausespan').removeClass('z-show'); },500); }elseif(classname=='off') { document.getElementById('audio').play(); obj.removeClass('off').addClass('on'); obj.siblings('span').text('开启'); $('.music-icon').addClass('active'); $('.pausespan').addClass('z-show'); setTimeout(function(){ $('.pausespan').removeClass('z-show'); },500); }; returnfalse; } $('.pausea').click(function() { musicControl($(this)); }); varaudio=document.getElementById('audio'); audio.play(); $(document).one("touchstart", function(){ audio.play() }) }); })(jQuery);

加进去后用微信（iOS系统）浏览页面发现居然没有自动播放，点击暂停后再次点击播放正常，这就说明播放功能没有问题，将页面用iOS自带浏览器Safari打开后也不能自动播放，往年都是用这段代码，屡试不爽难道突然就不好使了？随即用android手机打开页面，居然可以自动播放，那就证明代码本身是没有问题的，随后查了相关文献，是因为iOSSafari限制不允许audioautoplay,必须用户主动交互(例如click)后才能播放audio,因此我们通过一个用户交互事件来主动play一下audio应该就可以解决问题了，代码如下：

这个时候Safari可以自动播放了但是发现微信里面居然还是不行，难道是微信做了什么处理？将代码修改如下：

至此已经完美解决了自动播放的问题，其实对于不允许音频视频自动播放的问题来说不一定就是坏事，因为你想毕竟大家流量那么贵，一个音频视频动辄就几MB甚至十几MB、几十MB，自动播放流量瞬间就出去了，哭都来不及，所以如果不是必要情况还是不要自动播放的好，听不听看不看交给用户来选择。

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对毛票票的支持。

iOS系统和微信中不支持audio自动播放问题的解决方法

热门推荐

随机推荐