iOS下Audio自動播放(Autoplay)音樂


前幾天做了一個H5活動頁面,產品要求初始化播放音樂,因曉得H5 Audio標簽支持Autoplay就沒在意。 完了在手機上測試,發現手機上打開頁面死活就是不會自動播放,點擊播放按鈕才可以播放,很是糾結。 然后網上查了下發現iOS上禁止了Audio的Autoplay屬性,原因如下:

User Control of Downloads Over Cellular Networks

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

This plays the movie: <input type="button" value="Play" onclick="document.myMovie.play()">

This does nothing on iOS: <body onload="document.myMovie.play()">

詳細查看Safari HTML5 Audio and Video Guide

借助Google翻譯了解到:蘋果為了用戶着想,禁止了Autoplay和JS "onload" 加載播放。

官方禁用,和產品溝通了下,產品發了"友站"網頁給我說是可以讓我參考下,確實可以,但代碼太多,棄之。

還是去http://search.yahoo.com找答案了,在IBM開發者找到了答案:

// run on page load
var audio = document.getElementById('audio');
jQuery.ajax({
url: 'ajax.js',
async: false,
success: function() {
audio.play(); // audio will play in iOS before 4.2.1
}
});

詳細查看IBM開發者

但iOS4.2.1以后就失效了,現在都iOS8了,真是無語了,但也沒找到其它方法,就死馬當活馬醫試一下,結果,神奇的一幕出現了,打開竟然自動播放音樂了,哈哈哈...

不是說失效了么,這是為何呢?哦,剛才只是在微信里打開的,我再用Safari打開就不會自動播放音樂了,還好,我們H5活動僅限微信里面打開。

好了,不過Bug馬上又來了,測試發現一台安卓機在微信里打開也不能自動播放,我拿來試了下,確實如此,然后打開"友站"的發現也是不能自動播放,產品確認了下,讓參考"友站"的優化一下,就是觸摸一下就會自動播放。

document.addEventListener('touchstart', function(){ 
    audio.play();
}, false);

這次是真的好了,除了那台Android5.x系統的手機,其它在微信打開都可以自動播放了。

總結一下吧:

移動端Audio Autoplay
  1. 蘋果認為這是種不友好的行為
  2. 安卓同上
  3. 我同上

國內流量很貴的,哎喲我的錢啊。 我們通過"投機"繞過系統限制而達到了目的,這樣真的好嗎?

這樣對用戶的體驗真的好嗎?

我們真的值得這樣做么?


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM