音声付き動画自動再生まとめ

Chromeの自動再生ポリシーが2018年4月に変更されるらしいので、
現状と対応、他ブラウザもろもろざっくりまとめ
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

*無音の場合は常に許可される
*Safariは無音の場合でも、ユーザーが自動再生の許可を出した場合のみ

2018年3月まで

■自動再生OK
・Chrome *2018年3月まで
・Firefox
・IE
・Edge

■自動再生NG
・スマホ
・Safari *ユーザーが自動再生の許可を出した場合のみ自動再生が可能

Safari

ユーザーが自動再生の許可を出した場合のみ自動再生が可能

環境設定
↓
Webサイト
↓
自動再生
↓
全てのメディアを自動再生

2018年4月から（予定）

Chromeは2018年4月以降条件に達した場合のみ自動再生が可能

自動再生許可の条件

Media Engagement Index (MEI)のスコアに基づいて可否が決まる
chrome://media-engagement/

MEIスコアが0.7を超えると自動再生が許可され、
0.5を下回ると、拒否される

■MEIスコアを計算する

chrome://media-engagement/

スコア計算対象メディアの条件

・メディアの長さは7秒以上
・オーディオが存在し、ミュートされていない
・動画のタブが有効
・動画のサイズは200x140px以上

visitsが5以下の場合

Score

visitsが5以上の場合

significant_playback / visits

対応

自動許可がされていない場合はボタンを表示してユーザーにアクションを促す
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

自動再生許可の可否は、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.
 });
}

*iframeも同様、ユーザーのアクションなしでは自動再生を許可しない。autoplay属性も無視される

参考

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
https://docs.google.com/document/d/1_278v_plodvgtXSgnEJ0yjZJLg14Ogf-ekAFNymAJoU/edit
https://qiita.com/ktknest/items/e81b3a4caac540098fc8