站长图库

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

 发布时间 2019-04-05 19:09:02 热度  586

 Tag标签:  微信播放

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


站长图库

站长素材 - 建站资源分享平台

猜你喜欢
一行代码实现全站pjax无刷新加载

一行代码实现全站pjax无刷新加载

前端开发 672 2019-04-20

一:整合pjax的准备工作检查你的网站是否引入1.7.0版本以上的jquery.js,如果没有请全局引入1、新...

TAG:园艺wordpress博客模板

微信小程序发布新版本时自动提示用户更新的方法

微信小程序发布新版本时自动提示用户更新的方法

前端开发 749 2019-06-16

这篇文章主要介绍了微信小程序发布新版本时自动提示用户更新的方法,文中通过示例代码介绍的非常详细,对大家学习或者...

TAG:园艺wordpress博客模板

网站文字循环变色代码

网站文字循环变色代码

前端开发 835 2019-01-08

分享一段可以让网站文字循环变色的代码,很炫酷哦~~<div id="blink&qu...

TAG:园艺wordpress博客模板

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

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

前端开发 587 2019-04-05

IOS Safari 中,无法自动播放音频、视频文件。所以,移动页面我不建议产品设计自动播放的交互,即便在PC...

TAG:园艺wordpress博客模板