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 的承諾。也會忽略自動播放屬性

示例

範例 1：每當使用者在筆電上造訪 VideoSubscriptionSite.com，觀看電視節目或電影時。他們的媒體參與度分數很高，因此可以使用自動播放功能。

範例 2： GlobalNewsSite.com 同時包含文字和影片內容。 大部分使用者造訪網站上的文字內容，但是偶爾還是會觀看影片。 使用者的媒體參與度分數偏低，因此如果使用者直接透過社群媒體網頁或搜尋頁面導覽，系統不會自動播放。

範例 3： LocalNewsSite.com 同時包含文字和影片內容。 大多數使用者都是透過首頁進入網站，然後點選新聞文章。由於使用者與網域互動，因此新聞文章頁面可以自動播放影片。不過，請務必小心，確保使用者不會意外看到自動播放的內容

示例 4： MyMovieReviewBlog.com 嵌入含有電影預告片的 iframe，以便與評論一起發布。使用者與網域互動來取得網誌，因此允許自動播放。不過，網誌必須明確將該權限委派給 iframe，才能自動播放內容。

Chrome Enterprise 政策

您可以變更 Chrome 企業政策的自動播放行為，適用於資訊站或非人為系統等用途。請查看政策清單說明頁面，瞭解如何設定自動播放相關的企業政策：

  • 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 autoplay>
<button id="unmuteButton"></button>

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

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

網路音訊

自 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 上這些自動播放政策規則的網路音訊播放問題。