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();})