先上結論，根據新政策，媒體內容將被允許在以下條件下自動播放：

• 內容已靜音，或不包含任何音訊（僅限視訊）
• 使用者在瀏覽會話期間點選或點選網站上的某處
• 在移動裝置上，如果使用者已將站點新增到主螢幕
• 在桌面上，如果使用者經常在網站上播放媒體，根據媒體參與指數

以下文章為機翻與人翻相結合

Chrome 中的 video 視訊自動播放政策說明

改善使用者體驗，最大限度地減少安裝廣告攔截器的動機，並減少資料消耗

Chrome 66 中針對音訊和視訊元素啟動的自動播放策略有效地阻止了 Chrome 中大約一半不需要的媒體自動播放。對於 Web Audio API，Chrome 71 中啟動了自動播放策略。這會影響網頁遊戲、某些 WebRTC 應用程式和其他使用音訊功能的網頁。可以在下面的

Chrome 的自動播放政策在 2018 年 4 月發生了變化，我在這裡告訴您為什麼以及如何影響帶聲音的視訊播放。

使用者會喜歡這個新功能的！

chrome 會找到並阻止網頁中“惡意”的視訊自動播，比如惡意廣告內有聲視訊自動播放

但老闆不會喜歡它的！！所以開發者也不會喜歡它的

新特性！！！

您可能已經注意到，網路瀏覽器正朝著更嚴格的自動播放策略發展，以改善使用者體驗、最大限度地減少安裝廣告攔截器的動機，並減少昂貴和/或受限網路上的資料消耗。這些更改旨在為使用者提供更大的播放控制權，並使具有合法用例的釋出商受益。

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

• 始終允許靜音自動播放。
• 在以下情況下允許自動播放聲音：
  • 使用者與域進行了互動（單擊、點選等）。
  • 在桌面上，使用者的媒體參與指數閾值已被超過，這意味著使用者之前曾播放過有聲視訊。
  • 使用者已將該站點新增到其移動裝置的主螢幕或在桌面裝置上安裝了 PWA。
• 頂級框架可以將自動播放許可權委託給它們的 iframe 以允許自動播放聲音。

媒體參與指數

媒體參與指數 (MEI) 衡量個人在網站上消費媒體的傾向。Chrome 的方法是訪問每個來源的重要媒體播放事件的比率：

• 媒體（音訊/視訊）的消耗必須大於 7 秒。
• 音訊必須存在且未靜音。
• 帶有視訊的選項卡處於活動狀態。
• 視訊的大小（以畫素為單位）必須大於
  200x140。

Chrome 從中計算出媒體參與度分數，該分數在定期播放媒體的網站上最高。當它足夠高時，桌面web端的視訊就可以允許自動播放（對於普通開發者來說這分數感覺是玄學，老闆再問要多少分數時，就無法回答了...）

使用者的 MEI 可在about://media-engagement內部頁面獲得。

about://media-engagementChrome 內部頁面的螢幕截圖。

開發者建議

• 謹慎使用自動播放。自動播放可以是一個強大的參與工具，但如果播放了不想要的聲音或者他們認為由於不需要的視訊播放而導致不必要的資源使用（例如資料、電池），它也會惹惱使用者。
• 如果您確實想使用自動播放，請考慮從靜音內容開始，如果使用者有興趣探索更多內容，則讓他們取消靜音。許多網站和社交網路正在有效地使用這種技術。
• 除非有特殊原因，否則我們建議使用瀏覽器的本機控制元件進行視訊和音訊播放。這將確保正確處理自動播放策略。
• 如果您使用自定義媒體控制元件，請確保您的網站在不允許自動播放時正常執行。我們建議您始終檢視 play 函式返回的 promise，看看它是否被拒絕：

開發者模式切換

作為開發人員，您可能希望在本地更改 Chrome 自動播放策略行為，以測試您網站的不同使用者參與度。

• 您可以使用命令列完全禁用自動播放策略：chrome.exe --autoplay-policy=no-user-gesture-required。這使您可以測試您的網站，就好像使用者與您的網站有很強的互動一樣，並且始終允許播放自動播放。

• 您還可以決定通過禁用 MEI 以及是否預設情況下為新使用者自動播放具有最高整體 MEI 的站點來確保永遠不允許自動播放。chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies。

iframe 委託

預設情況下，嵌入式 IFrame 只能播放靜音或無聲視訊。但是，如果網站所有者希望他們網站上的 IFrame 能夠播放未靜音的內容，他們可以使用allow=autoplay將自動播放許可權傳遞給 IFrame。此屬性允許 IFrame 中包含的任何視訊播放，就像它託管在網站上一樣。

一個許可權的政策使開發人員可以選擇性地啟用和禁用瀏覽器功能和API。一旦源獲得了自動播放許可權，它就可以將該許可權委託給具有autoplay 許可權策略的跨源 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()沒有使用者手勢的情況下呼叫將使用NotAllowedErrorDOMException。並且自動播放屬性也將被忽略。

例子，哪些型別的網站允許，哪些型別的網站不允許

示例 1：每次使用者訪問VideoSubscriptionSite.com他們的膝上型電腦時，他們都會觀看電視節目或電影。由於他們的媒體參與度得分很高，因此允許自動播放。

示例 2：同時GlobalNewsSite.com具有文字和視訊內容。大多數使用者只是偶爾訪問該網站以獲取文字內容和觀看視訊。使用者的媒體參與度得分較低，因此如果使用者直接從社交媒體頁面或搜尋進行導航，則不允許自動播放。

示例 3：同時LocalNewsSite.com具有文字和視訊內容。大多數人通過主頁進入網站，然後點選新聞文章。由於使用者與域的互動，將允許在新聞文章頁面上自動播放。但是，應注意確保使用者不會對自動播放內容感到驚訝。

示例 4：MyMovieReviewBlog.com嵌入帶有電影預告片的 iframe 以進行評論。使用者與域互動以訪問部落格，因此允許自動播放。但是，部落格需要將給 iframe 新增許可權允許播放，以便內容自動播放。

Web 開發人員的最佳實踐

音訊/視訊元素

這是要記住的一件事：永遠不要假設視訊會播放，也不要在視訊沒有實際播放時顯示暫停按鈕。這非常重要，我將在下面再寫一次，供那些只是瀏覽那篇文章的人使用。

您應該始終檢視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。

網路音訊

該網路音訊API，因為Chrome瀏覽器71.已涵蓋自動播放有幾件事情需要了解它。首先，在開始音訊播放之前等待使用者互動是一種很好的做法，以便使用者知道發生了一些事情。例如，想想“播放”按鈕或“開/關”開關。您還可以根據應用程式的流程新增“取消靜音”按鈕。

// 其它原先程式碼不用變動
window.onload = function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
}

// 使用者互動後重播
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事件，則可以非同步檢測更改。

注：轉載請註明出處部落格園：sheldon([email protected])

https://github.com/willian12345