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

使用 Mac 在 PC 端測試的瀏覽器包括

Chrome 瀏覽器

Safari 瀏覽器

Firefox 瀏覽器

Chrome-限制策略

內(nèi)容參考自

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

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

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

靜音自動播放總是允許的。

在下列情況下允許使用聲音自動播放：

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

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

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

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

MEI 是一個評估用戶對于當(dāng)前站點的媒體參與程度的指數(shù)，它取決于

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

Chrome-應(yīng)對方案

1.不要假設(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 個選擇，

（1）靜音自動播放，

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

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

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

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

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

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

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

2.如果不支持，有 3 個選擇

靜音自動播放

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

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

靜音自動播放例子：

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

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

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

使用 Android 手機測試的瀏覽器包括以下

Firefox / QQ 瀏覽器 / 釘釘

微信

Chrome

Safari

UC瀏覽器

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

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

微信上實現(xiàn)自動播放需要用到一個 API WeixinJSBridge

它是在微信內(nèi)置瀏覽器中有一個內(nèi)置的 JS 對象,這個內(nèi)置的 JS 對象就是 WeixinJSBridge. WeixinJSBridge 并不是 WebView 一打開就有了，客戶端需要初始化這個對象，當(dāng)這個對象準(zhǔn)備好的時候，客戶端會拋出事件 "WeixinJSBridgeReady"。因此，在調(diào)用 WeixinJSBridge 相關(guān) api 時，需要做好 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();
        });
    }
}

移動端 Chrome 的限制和解決方案

muted可以自動靜音播放

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

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

移動端 Safari 的限制和解決方案

muted可以自動靜音播放

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

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

移動端 UC瀏覽器 的限制和解決方案

靜音模式也無法自動播放

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

參考資料

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

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

AudioContext播放聲音

先請求音頻文件，放到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();
    });
}

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