IOS Safari 中,無法自動播放音頻、視頻文件。所以,移動頁面我不建議產品設計自動播放的交互,即便在PC上,新版的chrome自動播放也被禁止了(chrome會根據用戶行為來確定是否可觸發自動播放)。
即便如此,在制作一些移動頁面的時候,應甲方爸爸的強烈要求,也難免會有自動播放這樣的交互,不過還好傳播的渠道大多是在微信中,所以經過搜索和嘗試,確認了一套降級方案來使用:IOS微信瀏覽器中可以正常的使用自動播放,在Safari中依舊不可以~
以下是代碼:
// 方法 function weixinPlay(fn) { if (!isWeixin()) { // 非微信中直接執行,支不支持就交給瀏覽器本身了 fn(); } else { if (window.WeixinJSBridge) { WeixinJSBridge.invoke("getNetworkType", {}, fn); // 這句話是在微信中可以自動播放的核心 } else { document.addEventListener("WeixinJSBridgeReady",function () { WeixinJSBridge.invoke("getNetworkType", {}, fn); }); } } } // 調用 weixinPlay(function() { document.querySelector('#bgm').play(); })