Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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月以降条件に達した場合のみ自動再生が可能

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

自動再生許可の条件

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした