免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

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

<div class="pause">
 <a class="on" href="#" rel="external nofollow" >
 </a>
 <span>開啟</span>
</div>
<div class="audio">
 <audio src="http://mat1.gtimg.com/ln/images/2016zt/12Dec/dlsdbm/music.mp3" controls="controls" preload="auto" autoplay="autoplay" id="audio" loop></audio>
</div>

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可以自動播放了但是發現微信里面居然還是不行,難道是微信做了什么處理?將代碼修改如下:

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> 
<script> 
 //一般情況下,這樣就可以自動播放了,但是一些奇葩iPhone機不可以 
 document.getElementById('idName').play(); 
 //微信必須加入Weixin JSAPI的WeixinJSBridgeReady才能生效 
 document.addEventListener("WeixinJSBridgeReady", function () { 
 document.getElementById('idName').play(); 
 document.getElementById('video').play(); //視頻自動播放
 }, false); 
</script>

至此已經完美解決了自動播放的問題,其實對于不允許音頻視頻自動播放的問題來說不一定就是壞事,因為你想畢竟大家流量那么貴,一個音頻視頻動輒就幾MB甚至十幾MB、幾十MB,自動播放流量瞬間就出去了,哭都來不及,所以如果不是必要情況還是不要自動播放的好,聽不聽看不看交給用戶來選擇。

看完了這篇文章,相信你對“iOS系統和微信中不支持audio自動播放怎么辦”有了一定的了解,如果想了解更多相關知識,歡迎關注創新互聯行業資訊頻道,感謝各位的閱讀!

網站標題:iOS系統和微信中不支持audio自動播放怎么辦
標題鏈接:http://m.newbst.com/article6/gsosog.html

成都網站建設公司_創新互聯,為您提供網站策劃Google營銷型網站建設微信公眾號全網營銷推廣ChatGPT

廣告

聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯

網站托管運營