解决微信video、audio 无法自动播放的问题

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容