Chrome 自動播放政策

改善使用者體驗、盡可能減少安裝廣告攔截器的動機，並減少數據用量

François Beaufort
François Beaufort
GitHub

Chrome 的自動播放政策已於 2018 年 4 月變更，我將說明這會如何影響有聲影片的播放情形。劇透警告：使用者一定會喜歡這個功能！

Liam Neeson：我一定會找到你，然後停下來。
Sean Bean：我們不會單純自動播放影片。
標記為「自動播放」的網際網路網路迷因(可在 ImgFlip 和 Imgur 上找到)。

新行為

你可能已注意到，網路瀏覽器將改用更嚴格的自動播放功能 為了改善使用者體驗，盡可能減少安裝獎勵 廣告攔截器，在昂貴和/或有限的情況下減少數據用量 更是如此這些異動旨在 而且有利於符合正當用途的發布商

Chrome 的自動播放政策十分簡單：

  • 一律允許使用靜音自動播放功能。
  • 符合下列條件時，系統會允許自動播放有聲內容：
  • 頂層框架可以將自動播放權限委派給 iframe，以便允許自動播放音訊。

媒體參與度指數

媒體參與度指數 (MEI) 則用於評估個人消費傾向 媒體管道Chrome 的做法是網頁造訪次數 每個來源的播放事件：

  • 媒體 (音訊/影片) 的播放時間必須超過 7 秒。
  • 音訊必須顯示在畫面上且未靜音。
  • 顯示含有該影片的分頁。
  • 影片大小 (以 px 為單位) 必須大於 200x140。

Chrome 據此計算出媒體參與度分數，這個分數在網站上最高 定期播放媒體的影片如果模型夠高的話 僅允許在電腦上自動播放。

使用者的 MEI 位於 about://media-engagement 內部頁面。

about://media-engagement 內部頁面的螢幕截圖。
Chrome 中 about://media-engagement 內部頁面的螢幕截圖。

開發人員開關

開發人員或許需要在本機變更 Chrome 自動播放政策的行為 針對不同使用者參與度測試網站

  • 您可以使用指令列標記 chrome.exe --autoplay-policy=no-user-gesture-required，完全停用自動播放政策。利用這項功能，您就能測試網站，就像使用者非常參與網站一樣 永遠允許自動播放。

  • 您也可以停用 MEI，並決定是否要讓整體 MEI 最高的網站預設為自動播放，確保系統永遠不會允許自動播放。使用旗標執行此作業：chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies。

iframe 委派

權限政策可讓開發人員選擇性啟用及停用 瀏覽器功能和 API來源收到自動播放後 還能將權限委派給跨來源 iframe 自動播放功能的權限政策。請注意，自動播放功能預設為啟用 相同來源 iframe。

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">

<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">

如果停用自動播放的權限政策，則呼叫 play()，而沒有 使用者手勢會拒絕含有 NotAllowedError DOMException 的承諾。系統也會忽略 autoplay 屬性。

範例

範例 1：每當使用者在自己的網站上造訪 VideoSubscriptionSite.com 筆電會播放電視節目或電影因為他們的媒體參與度分數是 允許自動播放

範例 2： GlobalNewsSite.com 同時含有文字和影片內容。 大多數使用者造訪網站是為了閱讀文字內容，只有偶爾觀看影片。使用者媒體參與度分數偏低，因此使用者將無法自動播放 直接透過社群媒體頁面或搜尋前往

範例 3： LocalNewsSite.com 同時含有文字和影片內容。 大多數使用者會透過首頁進入網站，然後點按新聞文章。由於使用者與網域互動，因此允許在新聞文章頁面上自動播放。不過，請務必謹慎操作，確保使用者不會因自動播放的內容而感到意外。

範例 4：MyMovieReviewBlog.com 嵌入含有電影預告片的 iframe，以便搭配評論。使用者為了瀏覽網站而與網域互動，因此允許自動播放。不過，網誌必須明確將這項權限委派給 iframe，才能讓內容自動播放。

Chrome Enterprise 政策

您可以使用 Chrome Enterprise 政策變更自動播放行為，以便在資訊亭或無人系統等用途中使用。查看政策 清單說明頁面，說明如何設定自動播放相關企業 政策：

  • AutoplayAllowed 政策可控管是否要 是否允許自動播放。
  • AutoplayAllowlist 政策可讓你 指定網址模式許可清單，指定一律啟用自動播放功能。

網頁程式開發人員適用的最佳做法

音訊/影片元素

請特別注意：不要假設影片一定會播放 實際上並未在影片播放時顯示暫停按鈕。是這樣 我必須再在下方寫一次 快速瀏覽完整訊息

您應一律查看 Play 函式傳回的 Promise 或 影片已遭拒：

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

if (promise !== undefined) {
  promise.then(_ => {
    // Autoplay started!
  }).catch(error => {
    // Autoplay was prevented.
    // Show a "Play" button so that user can start playback.
  });
}

使用靜音自動播放功能，讓使用者選擇是否要取消靜音，是吸引使用者的方法之一。(請參閱以下範例)。有些網站已具備高效率的做法 包括 Facebook、Instagram、Twitter 和 YouTube

<video id="video" muted playsinline autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>

觸發使用者啟用功能的事件仍須在各瀏覽器中一致定義。建議你在屆時使用 "click"。請參閱 GitHub 問題 whatwg/html#3849。

Web Audio

自 Chrome 71 版起，Web Audio API 就涵蓋了這項功能。 請留意以下幾點。首先，建議您在開始播放音訊前等待使用者互動，讓使用者知道發生了什麼事。例如「播放」按鈕或「開/關」切換鈕。您也可以根據應用程式的流程新增「取消靜音」按鈕。

如果您在網頁載入時建立 AudioContext，就必須在使用者與網頁互動 (例如按下按鈕) 後的某個時間點呼叫 resume()。或者，AudioContext 會在使用者之後恢復 如果在任何附加的節點上呼叫 start()，系統就會做出手勢。

// Existing code unchanged.
window.onload = function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
}

// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() {
  context.resume().then(() => {
    console.log('Playback resumed successfully');
  });
});

您也可以在使用者與應用程式互動時，AudioContext建立 頁面。

document.querySelector('button').addEventListener('click', function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
});

如要偵測瀏覽器是否需要使用者互動才能播放音訊，請在建立 AudioContext.state 後檢查該值。如果允許播放， 並立即切換至 running。否則為 suspended。當你聽 呼叫 statechange 事件時，您可以非同步偵測變更。

如要查看範例，請參閱用於修正的小型提取要求 針對以下各項自動播放政策規則的網路音訊播放：https://airhorner.com。