不一樣瀏覽器下 autoplay 的限制策略和方案的整理

不一樣瀏覽器下 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播放聲音

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

1. 實例化AudioContext

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

1. 解碼播放

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