一.背景
自動播放的問題在工作中時常遇到，針對自動播放做了一下簡單的總結。
二.自動播放
自動播放就是未經用戶的允許，播放音頻或視頻的行爲。
在HTML裏，通過給video標籤， audio標籤設置autoplay的屬性，或者通過JS的代碼去執行播放的邏輯自動播放經常會碰到這些問題：
<video src="xxx" autoplay></video>
<audio src="xxx" autoplay></audio>
//
videoElement.play()
audioElement.play()
- 爲什麼不能自動播放
- 爲什麼自動播放時沒有聲音
- 爲什麼在我的網站上自動播放會靜音，在別的視頻網站上就不會
- ....
關於這些問題，後面會慢慢補充解釋，我們還是從用戶體驗的方面去思考，爲什麼瀏覽器會限制自動播放
如果一個網頁在沒有任何警告的情況下自動播放帶聲音的媒體資源，如果發出一些噪音或對人造成困擾，討厭的聲音，對用戶的體驗是非常不好的。所以，瀏覽器會限制自動播放，在特定的情況下才能帶聲音自動播放。
三.自動播放的策略
一些主流的瀏覽器對自動播放會有以下的規則,如 chrome， firefox ：
- 視頻設置爲靜音或音量設置爲0
- 用戶與網站進行了交互，例如由用戶觸發的事件，如(click, tap, keypress)之類的事件裏調用視頻的播放
- 網站被列入白名單，用戶在網站上使用媒體比較頻繁，媒體參與度分值足夠高，或者在瀏覽器的設置裏設置了允許自動播放(如IE, safari)
- 在iframe的標籤上設置了允許自動播放（應該需要父頁面也能自動播放）
根據瀏覽器的自動播放策略，上面的一些問題就可以得到解釋，如自動播放時沒有聲音是因爲要靜音才能自動播放，也可以說明自動播放無效，是不是沒有設置靜音。
在一些視頻網站上能帶聲音自動播放，就是視頻網站了多次觀看視頻，媒體參與度分值足夠高了。
chrome自動播放策略簡略截圖：(詳細請參考文檔末尾資料的chrome自動播放策略)
四.自動播放在移動端的支持情況.
測試demo代碼： https://codepen.io/zackxiong/pen/oNvqZVw
video標籤設置autoplay, muted屬性。測試mp4在主流瀏覽器自動播放的情況。(有空更新)
|
機型 |
安卓微信瀏覽器(7.0.13) |
小米瀏覽器(11.11.22) |
安卓QQ瀏覽器(10.2.1.6632) |
安卓UC瀏覽器(12.9.7.1077) |
安卓獵豹瀏覽器(5.20.4) |
安卓Chrome瀏覽器(80.0.3987.119) |
搜狗瀏覽器(5.27.8.86541) |
|---|---|---|---|---|---|---|---|
| 紅米k20 Prp | 不能 | 允許 | 允許 | 不能 | 不能 | 允許 | 允許 |
| 小米5s |
五.檢測頁面是否支持自動播放
基本上主流的瀏覽器都沒有一個直接的方法，屬性，或者回調去檢測頁面是否支持自動播放。需要從另外的方向去檢測頁面是否支持自動播放。
可以從play() 方法去入手， play() 會返回一個 Promise對象，如果播放失敗，Promise對象的狀態就會變爲rejected. 這時候可以通過catch去捕捉這個錯誤，如果捕捉的錯誤是NotAllowedError，那麼就可以說明頁面不支持自動播放。
當然，也要注意一下瀏覽器的兼容性，要檢測play() 返回是不是undefined.
codepen demo： https://codepen.io/zackxiong/full/wvKJbZe
六.特殊的情況
用戶通過點擊跳轉到新頁面，新頁面視頻設置了自動播放，此時也可以帶聲音自動播放，但是刷新頁面後就無法自動播放了
測試demo : (暫時不方便放測試demo地址，小夥伴們可以自己寫兩個簡單的頁面， 頁面A通過a標籤跳轉到頁面B, 頁面B有自動播放的邏輯)
這種情況應該是由用戶點擊跳轉的頁面，新頁面也符合由用戶進行交互的規則。但是刷新頁面就沒有用戶的交互了，所以也就無法自動播放。
七.自動播放的參考資料