關於設置瀏覽器自動播放音頻 autoplay 瀏覽器默認阻止問題

時間 2021-03-05

標籤 html 前端 web chrome 跨域 promise 瀏覽器網絡框架 ide 欄目瀏覽器简体版

原文原文鏈接

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
最近一位前端朋友遇到了一個問題，就是關於谷歌瀏覽器阻止自動播放音頻的問題，即設置autoplay屬性後無效。
以前也沒有遇到過，後面就這個問題研究了一下。下面貼一下報錯的截圖

標籤： autoplayhtml

首先朋友問到我這個問題，我也沒有遇到過，因此立即新建了一個html在谷歌瀏覽器中看了一下，果不如其然報了這個錯誤。而後我就去百度了一下，下面貼一下百度到的幾篇文章。前端

百度出的解決方法

csdn-起風了解決的思路是添加muted 將音頻靜音以後在經過js設置paly 進行播放。（嘗試了一下在谷歌瀏覽器裏沒有生效）
csdn-溫酒斟與你解決的思路是須要用戶手動點擊過頁面再進行播放（這個符合咱們自動播放的問題，確實在調用play以前用戶操做過頁面以後，是不會報錯的）
博客園-沫丶灬沫解決思路是更改谷歌瀏覽器的一些設置（這個對於用戶的體驗來講確實不夠友好）

後面我又查了一下谷歌的文檔--（權威）考慮到可能有些朋友可能看不到這個連接，下面會大概講述一下文章說的內容web

這篇文章是講自動播放政策變動的，谷歌於2018年4月更改自動播放，就是不讓用了。給出的緣由是Web瀏覽器正在朝着更嚴格的自動播放策略發展，以改善用戶體驗，最大程度地減小安裝廣告攔截器的動機，並減小昂貴和/或受限網絡上的數據消耗。這些更改旨在更好地控制用戶的播放，並使使用合法狀況的發佈者受益。chrome

谷歌給出的容許自動播放的條件

始終容許靜音自動播放。
在如下狀況下，容許自動播放聲音：
一、用戶已與域進行了交互（單擊，點擊等）。
二、在臺式機上，已經超過了用戶的「媒體參與度索引」閾值，這意味着該用戶之前曾播放帶聲音的視頻。
三、用戶已將該網站添加到他們在移動設備上的主屏幕，或者在桌面上安裝了PWA。
頂級框架能夠將自動播放權限委派給其iframe，以容許自動播放聲音。

給出解決的方法

開發人員開關

做爲開發人員，您可能須要在本地更改Chrome自動播放策略的行爲，以根據用戶的參與度來測試您的網站。跨域

您能夠經過使用一個徹底禁用自動播放策略內部開關用chrome.exe --autoplay-policy=no-user-gesture-required。這樣，您就能夠像測試用戶強烈參與您的網站同樣測試您的網站，而且始終容許播放自動播放功能。promise
您還能夠經過禁用MEI，將自動播放策略應用於Web音頻以及整體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()不帶用戶手勢的調用將使用NotAllowedErrorDOMException拒絕諾言。而且autoplay屬性也將被忽略。框架

Chrome企業政策

能夠針對售貨亭或無人值守的系統等用例，經過Chrome企業策略更改這種新的自動播放行爲。請查看「策略列表」幫助頁面，以瞭解如何設置這些與自動播放相關的新企業策略：ide

該「AutoplayAllowed」的策略控制自動播放是否容許。
該「AutoplayAllowlist」政策，容許您指定的URL模式的容許列表，其中自動播放將始終啓用。

Web開發人員的最佳作法

```
   <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <audio id="bgMusic" controls autoplay loop
        src="https://webfs.yun.kugou.com/202103042048/2b4e1bcbf20fc681fc0b79afd2c0cbce/G060/M09/00/11/HJQEAFbRRM-AVOSeADxTwivtZiI118.mp3"></audio>
</body>
<script>
    var promise = document.querySelector('video').play();
    if (promise !== undefined) {
        promise.then(_ => {
            // Autoplay started! 這種狀況能夠自動播放（非谷歌的其餘瀏覽器：edge、360）
        }).catch(error => {
            //  Autoplay was prevented.谷歌和火狐就會阻止播放，能夠顯示一個PLAY按鈕提示用戶點擊後進行播放
        });
    }
</script>

</html>
```

若是我寫得有不對的地方，還望各位指出糾正。