iOS系统和微信中不支持audio自动播放怎么办

小编给大家分享一下iOS系统和微信中不支持audio自动播放怎么办,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

创新互联-成都网站建设公司,专注网站设计、成都做网站、网站营销推广,空间域名,雅安服务器托管网站托管运营有关企业网站制作方案、改版、费用等问题,请联系创新互联

移动端音频播放代码

css

.pause { position: absolute; z-index: 10000; bottom: 10px; right: 10px;}
.pause a { width:30px; height:30px; background:url(/upload/otherpic51/121211.png) 0 0 no-repeat; display:block; background-size: 90px auto;}
.pause a.on { -webkit-animation:reverseRotataZ 1.2s linear infinite}
.pause a.off { }
.pause span{ color: #fff; font-size: 16px; position:absolute; left:-40px; top:5px; text-shadow:1px 1px 1px #000; letter-spacing:2px; -webkit-transition:all .2s linear; opacity:0; -webkit-transform:translateX(-20px) }
.pause span.z-show { opacity:1; -webkit-transform:translateX(0px)}
.coffee-steam-box { -webkit-transform:translate(-40px,-40px)}
@-webkit-keyframes reverseRotataZ {
 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;}

html


 
 
 开启
 

javascript

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

问题解决

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

document.getElementById('idName').play();

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

 

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

看完了这篇文章,相信你对“iOS系统和微信中不支持audio自动播放怎么办”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


分享题目:iOS系统和微信中不支持audio自动播放怎么办
当前网址:http://scyanting.com/article/gsosog.html

其他资讯