Chrome 自動播放政策

改善使用者體驗、降低安裝廣告攔截器的誘因，以及減少資料用量

François Beaufort
François Beaufort
GitHub

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

Liam Neeson：我會找到你，然後暫停你。
Sean Bean：One 不會自動播放影片。
在 Imgflip 和 Imgur 上找到的標記為「自動播放」的網路迷因。

新行為

如您注意到，為了改善使用者體驗、盡量減少安裝廣告攔截器的誘因，以及在昂貴和/或受限的網路上減少資料使用量，網頁瀏覽器正朝著更嚴格的自動播放政策前進。這些異動旨在讓使用者進一步控管播放功能，並為有合法用途的發布商帶來好處。

Chrome 的自動播放政策很簡單：

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

媒體參與度指數

媒體參與度指數 (MEI) 可評估使用者在網站上消費媒體的傾向。Chrome 的做法是計算每個來源的重大媒體播放事件與造訪次數比率：

  • 媒體 (音訊/視訊) 的使用時間必須超過 7 秒。
  • 必須有音訊，且音訊必須未靜音。
  • 含有影片的分頁處於啟用狀態。
  • 影片尺寸 (以像素為單位) 必須大於 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()。或者，如果在任何已連結節點上呼叫 start()，AudioContext 會在使用者手勢後恢復。

// 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 的這些自動播放政策規則的 Web Audio 播放功能。