资讯专栏INFORMATION COLUMN

不同浏览器下 autoplay 的限制策略和方案的整理

LMou / 731人阅读

摘要:不同浏览器下的限制策略和方案的整理端浏览器的限制策略和应对方案使用在端测试的浏览器包括浏览器浏览器浏览器浏览器限制策略内容参考自年月份发布的正式关掉了声音自动播放静音自动播放总是允许的。

不同浏览器下 autoplay 的限制策略和方案的整理 PC 端浏览器的限制策略 和 应对方案

使用 Mac 在 PC 端测试的浏览器包括

Chrome 浏览器

Safari 浏览器

Firefox 浏览器

Chrome 浏览器
Chrome-限制策略

内容参考自

https://developers.google.com...

https://github.com/gnipbao/ib...

2018 年 4 月份发布的 Chrome 66 正式关掉了声音自动播放

静音自动播放总是允许的。

在下列情况下允许使用声音自动播放:

用户已经与域进行了交互(点击,tap 等)。

在桌面上,用户的媒体参与指数阈值(MEI)已被越过,这意味着用户以前播放带有声音的视频。

在移动设备上,用户已将该网站添加到主屏幕。

顶部框架可以将自动播放权限授予其 iframe 以允许自动播放声音。

MEI 是一个评估用户对于当前站点的媒体参与程度的指数,它取决于

-   用户在媒体上停留时间超过了 7 秒以上
-   音频必须是展示出来,并且没有静音
-   与 video 之间有过交互
-   媒体的尺寸不小于 200x140.
Chrome-应对方案

1.不要假设视频会播放,并且在视频不是真正播放时不要显示暂停按钮。

2.根据 promise 结果,判断当前媒体是否支持 autoplay

var promise = document.querySelector("video").play();

if (promise !== undefined) {
    promise
        .catch(error => {
            // Auto-play was prevented
            // Show a UI element to let the user manually start playback
        })
        .then(() => {
            // Auto-play started
        });
}

3.如果不支持,有 3 个选择,

(1)静音自动播放,

(2)或者选择弹出 dialog 引导用户产生一次交互,在 event 回调里调用 play()

(3)提高 Chrome 浏览器的 MEI 指数

Safari 浏览器
Safari 的限制策略和应对方案

内容参考自
https://webkit.org/blog/7734/...

Safari 浏览器使用自动推理引擎来阻止绝大多数网站默认自动播放的媒体元素。

Safari11 允许用户通过「此网站的设置」选项,让用户控制哪些网站可以自动播放音视频

1.判断当前媒体是否支持 autoplay

2.如果不支持,有 3 个选择

静音自动播放

引导用户对浏览器设置为【允许自动播放】

弹出 dialog 引导用户产生一次交互,在 event 回调里调用 play()

静音自动播放例子:

弹出 dialog 引导用户产生一次交互的例子:

引导用户对浏览器设置为【允许自动播放】的例子:

Firefox 浏览器

个人测试的结果是 Firefox 浏览器支持 autoplay

移动端浏览器的限制策略 和 应对方案

使用 Android 手机测试的浏览器包括以下

Firefox / QQ 浏览器 / 钉钉

微信

Chrome

Safari

UC浏览器

其中 Firefox / QQ 浏览器 / 钉钉 使用 video autoplay 的表现良好

微信的限制策略和应对方案

微信上实现自动播放需要用到一个 API WeixinJSBridge

它是在微信内置浏览器中有一个内置的 JS 对象,这个内置的 JS 对象就是 WeixinJSBridge. WeixinJSBridge 并不是 WebView 一打开就有了,客户端需要初始化这个对象,当这个对象准备好的时候,客户端会抛出事件 "WeixinJSBridgeReady"。因此,在调用 WeixinJSBridge 相关 api 时,需要做好 WeixinJSBridge 存在与否的判断.

//监听 WeixinJSBridge 是否存在
if (
    typeof WeixinJSBridge == "object" &&
    typeof WeixinJSBridge.invoke == "function"
) {
    vedio.play();
} else {
    //监听客户端抛出事件"WeixinJSBridgeReady"
    if (document.addEventListener) {
        document.addEventListener(
            "WeixinJSBridgeReady",
            function() {
                vedio.play();
            },
            false
        );
    } else if (document.attachEvent) {
        document.attachEvent("WeixinJSBridgeReady", function() {
            vedio.play();
        });
        document.attachEvent("onWeixinJSBridgeReady", function() {
            vedio.play();
        });
    }
}
移动端 Chrome 的限制和解决方案

muted可以自动静音播放

引导用户做一次交互可以播放

MEI值高的网站,可以自动播放

移动端 Safari 的限制和解决方案

muted可以自动静音播放

引导用户做一次交互可以播放

引导用户对浏览器设置为【允许自动播放】

移动端 UC浏览器 的限制和解决方案

静音模式也无法自动播放

弹出dialog,引导用户做一次交互可以播放

音频的限制策略和应对方案

参考资料

https://segmentfault.com/a/11...

音频元素

原生播放音频除了使用audio标签之外,还有另外一个API叫AudioContext,AudioContext接口表示由音频模块连接而成的音频处理图,每个模块对应一个AudioNode。AudioContext可以控制它所包含的节点的创建,以及音频处理、解码操作的执行。做任何事情之前都要先创建AudioContext对象,因为一切都发生在这个环境之中。

AudioContext播放声音

先请求音频文件,放到ArrayBuffer里面,然后用AudioContext的API进行decode解码,解码完了再让它去play。

function request (url) {
    return new Promise (resolve => {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        // set response Type arraybuffer
        xhr.responseType = "arraybuffer";
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                resolve(xhr.response);
            }
        };
        xhr.send();
    });
}

实例化AudioContext

// Safari是使用webkit前缀
let context = new (window.AudioContext || window.webkitAudioContext)();

解码播放

function play (context, decodeBuffer) {
    let source = context.createBufferSource();
    source.buffer = decodeBuffer;
    source.connect(context.destination);
    // 从0s开始播放
    source.start(0);
}
// 请求音频数据
let audioMedia = await request(url);
// 进行decode和play
context.decodeAudioData(audioMedia, decode => play(context, decode));

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102084.html

相关文章

  • 面试信心来源于过硬基础

    摘要:避免在页面的主体布局中使用,要等其中的内容完全下载之后才会显示出来,显示比布局慢。实现多行文本溢出显示效果实现方法适用范围因使用了的扩展属性,该方法适用于浏览器及移动端 在过去的一年很多人不满于公司没有福利、人际关系不好相处、没有发展前途的境遇等等,想着在开年来换一份工作来重新开始自己,那么 你 准备好了吗? 下面是本人整理的一份面试材料,本想自己用的,但是新年第一天 公司突然给了我个...

    Ashin 评论0 收藏0
  • 面试信心来源于过硬基础

    摘要:避免在页面的主体布局中使用,要等其中的内容完全下载之后才会显示出来,显示比布局慢。实现多行文本溢出显示效果实现方法适用范围因使用了的扩展属性,该方法适用于浏览器及移动端 在过去的一年很多人不满于公司没有福利、人际关系不好相处、没有发展前途的境遇等等,想着在开年来换一份工作来重新开始自己,那么 你 准备好了吗? 下面是本人整理的一份面试材料,本想自己用的,但是新年第一天 公司突然给了我个...

    ISherry 评论0 收藏0
  • 手机览器自动播放视频video(设置autoplay无效)解决方案

    摘要:参考链接禁止自动播放后,有什么比较好的方法实现的自动播放吗微信自动播放视频可交互,设置层级,无控制条,非视频下安装系统安装使用音视频播放和常见的坑处理在微信和浏览器中不全屏播放解决 1、问题的提出 某一天接了个需求,需要在手机的H5页面内加入视频,我开开心心做完,准备交付的时候,问题来了,PM想要用户一进入页面,视频就开始播放,不需要用户手动点击。 2、尝试解决 加autoplay 视...

    fyber 评论0 收藏0

发表评论

0条评论

LMou

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<