Autoplay 與 mute

如果用 facebook 網頁版來觀看影片，你會發現自動播放的影片都是靜音的，這是因為瀏覽器為了改善使用者體驗而限制了 autoplay 的條件。

試想如果一個影片就莫名其妙播放然後耳機就突然播出聲音了，不知情的使用者還不被嚇個半死怒關網站，如果是怪怪的網站又忘記帶耳機那場面又更尷尬了。

所以如果想使用 auto-play 可以，瀏覽器規定你必須要是靜音，等到使用者跟網站有互動後（click 事件等）才能夠播放聲音。

要怎麼知道這件事呢？在 <video> 中，你可以用 video.play() 這個 API 來播放影片，這個 API 會回傳一個 Promise，如果成功 resolve 了代表影片可以自動播放，如果 reject 的話就要記得做 fallback 處理：

1. 例如如果進到 catch，就把 video.muted = true 再播放一次試試看
2. 直接顯示無法播放的提示

video.play
	.then() // 成功播放，看要做什麼
  .catch() // 無法播放

MEI（Media Engagement Index）

Chrome 會自動幫你計算這個 index 的 score，比如說你常常到 a 網站去看影片，只要超過一定分數，那麼 Chrome 就會幫你解除自動播放的機制。（桌面版）

不過因為我們並不知道網站是否有在使用者的 MEI 裡頭，所以一律都要做處理比較好。如果想看自己的 MEI，可以到 chrome://media-engagement/ 廣大男性同胞們請注意了。

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Chrome enterprise policy

Chrome 的內部有一些 enterprise list 可以直接略過 autoplay 的限制，像是 youtube 就可以無視 autoplay 限制直接播放有聲音的影片。

至於要怎麼變成 enterprise policy，這恐怕就是人脈與企業的問題了。

小結

在 Google developer (opens new window) 當中有比較詳盡的解說，可以直接參考。在實作自動播放的時候千萬要記得把 autoplay policy 謹記在心。