摘要：不同瀏覽器下的限制策略和方案的整理端瀏覽器的限制策略和應(yīng)對(duì)方案使用在端測(cè)試的瀏覽器包括瀏覽器瀏覽器瀏覽器瀏覽器限制策略內(nèi)容參考自年月份發(fā)布的正式關(guān)掉了聲音自動(dòng)播放靜音自動(dòng)播放總是允許的。

使用 Mac 在 PC 端測(cè)試的瀏覽器包括

Chrome 瀏覽器

Safari 瀏覽器

Firefox 瀏覽器

Chrome-限制策略

內(nèi)容參考自

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

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

2018 年 4 月份發(fā)布的 Chrome 66 正式關(guān)掉了聲音自動(dòng)播放

靜音自動(dòng)播放總是允許的。

在下列情況下允許使用聲音自動(dòng)播放：

用戶已經(jīng)與域進(jìn)行了交互（點(diǎn)擊，tap 等）。

在桌面上，用戶的媒體參與指數(shù)閾值(MEI)已被越過，這意味著用戶以前播放帶有聲音的視頻。

在移動(dòng)設(shè)備上，用戶已將該網(wǎng)站添加到主屏幕。

頂部框架可以將自動(dòng)播放權(quán)限授予其 iframe 以允許自動(dòng)播放聲音。

MEI 是一個(gè)評(píng)估用戶對(duì)于當(dāng)前站點(diǎn)的媒體參與程度的指數(shù)，它取決于

-   用戶在媒體上停留時(shí)間超過了 7 秒以上
-   音頻必須是展示出來，并且沒有靜音
-   與 video 之間有過交互
-   媒體的尺寸不小于 200x140.

Chrome-應(yīng)對(duì)方案

1.不要假設(shè)視頻會(huì)播放，并且在視頻不是真正播放時(shí)不要顯示暫停按鈕。

2.根據(jù) promise 結(jié)果，判斷當(dāng)前媒體是否支持 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 個(gè)選擇，

（1）靜音自動(dòng)播放，

（2）或者選擇彈出 dialog 引導(dǎo)用戶產(chǎn)生一次交互，在 event 回調(diào)里調(diào)用 play()

（3）提高 Chrome 瀏覽器的 MEI 指數(shù)

Safari 的限制策略和應(yīng)對(duì)方案

內(nèi)容參考自
https://webkit.org/blog/7734/...

Safari 瀏覽器使用自動(dòng)推理引擎來阻止絕大多數(shù)網(wǎng)站默認(rèn)自動(dòng)播放的媒體元素。

Safari11 允許用戶通過「此網(wǎng)站的設(shè)置」選項(xiàng)，讓用戶控制哪些網(wǎng)站可以自動(dòng)播放音視頻

1.判斷當(dāng)前媒體是否支持 autoplay

2.如果不支持，有 3 個(gè)選擇

靜音自動(dòng)播放

引導(dǎo)用戶對(duì)瀏覽器設(shè)置為【允許自動(dòng)播放】

彈出 dialog 引導(dǎo)用戶產(chǎn)生一次交互，在 event 回調(diào)里調(diào)用 play()

靜音自動(dòng)播放例子：

彈出 dialog 引導(dǎo)用戶產(chǎn)生一次交互的例子：

引導(dǎo)用戶對(duì)瀏覽器設(shè)置為【允許自動(dòng)播放】的例子：

個(gè)人測(cè)試的結(jié)果是 Firefox 瀏覽器支持 autoplay

使用 Android 手機(jī)測(cè)試的瀏覽器包括以下

Firefox / QQ 瀏覽器 / 釘釘

微信

Chrome

Safari

UC瀏覽器

其中 Firefox / QQ 瀏覽器 / 釘釘 使用 video autoplay 的表現(xiàn)良好

微信的限制策略和應(yīng)對(duì)方案

微信上實(shí)現(xiàn)自動(dòng)播放需要用到一個(gè) API WeixinJSBridge

它是在微信內(nèi)置瀏覽器中有一個(gè)內(nèi)置的 JS 對(duì)象,這個(gè)內(nèi)置的 JS 對(duì)象就是 WeixinJSBridge. WeixinJSBridge 并不是 WebView 一打開就有了，客戶端需要初始化這個(gè)對(duì)象，當(dāng)這個(gè)對(duì)象準(zhǔn)備好的時(shí)候，客戶端會(huì)拋出事件 "WeixinJSBridgeReady"。因此，在調(diào)用 WeixinJSBridge 相關(guān) api 時(shí)，需要做好 WeixinJSBridge 存在與否的判斷.

//監(jiān)聽 WeixinJSBridge 是否存在
if (
    typeof WeixinJSBridge == "object" &&
    typeof WeixinJSBridge.invoke == "function"
) {
    vedio.play();
} else {
    //監(jiān)聽客戶端拋出事件"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();
        });
    }
}

移動(dòng)端 Chrome 的限制和解決方案

muted可以自動(dòng)靜音播放

引導(dǎo)用戶做一次交互可以播放

MEI值高的網(wǎng)站，可以自動(dòng)播放

移動(dòng)端 Safari 的限制和解決方案

muted可以自動(dòng)靜音播放

引導(dǎo)用戶做一次交互可以播放

引導(dǎo)用戶對(duì)瀏覽器設(shè)置為【允許自動(dòng)播放】

移動(dòng)端 UC瀏覽器 的限制和解決方案

靜音模式也無法自動(dòng)播放

彈出dialog,引導(dǎo)用戶做一次交互可以播放

參考資料

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

原生播放音頻除了使用audio標(biāo)簽之外，還有另外一個(gè)API叫AudioContext，AudioContext接口表示由音頻模塊連接而成的音頻處理圖，每個(gè)模塊對(duì)應(yīng)一個(gè)AudioNode。AudioContext可以控制它所包含的節(jié)點(diǎn)的創(chuàng)建，以及音頻處理、解碼操作的執(zhí)行。做任何事情之前都要先創(chuàng)建AudioContext對(duì)象，因?yàn)橐磺卸及l(fā)生在這個(gè)環(huán)境之中。

AudioContext播放聲音

先請(qǐng)求音頻文件，放到ArrayBuffer里面，然后用AudioContext的API進(jìn)行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();
    });
}

實(shí)例化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);
}
// 請(qǐng)求音頻數(shù)據(jù)
let audioMedia = await request(url);
// 進(jìn)行decode和play
context.decodeAudioData(audioMedia, decode => play(context, decode));