Chrome 自動播放政策

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

Chrome 的自動播放政策已在 2018 年 4 月修訂，我將說明這項異動對有聲影片播放的影響及原因。劇透警告：使用者一定會喜歡！

新行為

您可能已注意到，網路瀏覽器已改用更嚴格的自動播放政策，以改善使用者體驗、盡量減少安裝廣告攔截器的獎勵，並減少昂貴和/或受限網路的數據用量。這些異動旨在讓使用者進一步控管播放功能，同時讓發布商也能正當用途。

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

• 一律允許使用靜音自動播放。
• 允許自動播放有音效的情況如下：
  • 使用者與網域互動 (點擊、輕觸等)。
  • 使用者的媒體參與度指數門檻已門檻，代表使用者先前播放過有聲的影片。
  • 使用者已在行動裝置上將網站新增至主畫面，或是在電腦上安裝 PWA。
• 頂端影格可將自動播放權限委派給 iframe，以允許自動播放有聲播放。

媒體參與指數

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

• 媒體 (音訊/影片) 的使用時間必須大於 7 秒。
• 必須顯示音訊並取消靜音。
• 顯示影片的分頁為有效狀態。
• 影片大小 (以像素為單位) 必須大於 200x140。

然後，Chrome 計算出媒體參與度分數，這個分數在一般播放媒體的網站上獲得最高成效。高點時，媒體就只會在電腦上自動播放。

您可以在 about://media-engagement 內部頁面找到使用者的 MEI。

開發人員開關

開發人員可能會想在本機上變更 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 企業政策

您可以針對資訊站或閒置系統等用途，透過 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 的自動播放政策規則修正網路音訊播放問題。