Chrome の自動再生ポリシー

ユーザー エクスペリエンスの向上、広告ブロッカーのインストールを促すインセンティブの最小化、データ使用量の削減

François Beaufort

注: 自動再生ポリシーは Chrome 66 で音声要素と動画要素向けにリリースされ、Chrome で不要なメディアの自動再生の約半分を効果的にブロックします。Web Audio API 向けの自動再生ポリシーは Chrome 71 でリリースされました。これは、ウェブゲーム、一部の WebRTC アプリケーション、音声機能を使用するその他のウェブページに影響します。詳しくは、以下の Web Audio API セクションをご覧ください。

Chrome の自動再生ポリシーが 2018 年 4 月に変更されました。これが音声付き動画の再生に影響する理由とその影響についてご説明します。ネタバレ注意: ユーザーにきっと気に入るはず！

Imgflip と Imgur で見つかった「autoplay」のタグが付いたインターネット ミーム。

新しい動作

お気づきのように、ウェブブラウザは、ユーザー エクスペリエンスを向上させ、広告ブロッカーをインストールするインセンティブを最小限に抑え、高価なネットワークや制約のあるネットワークでのデータ消費量を削減するために、より厳格な自動再生ポリシーに移行しています。この変更は、ユーザーが再生をより詳細に制御できるようにし、正当なユースケースを持つパブリッシャーにメリットをもたらすことを目的としています。

Chrome の自動再生ポリシーはシンプルです。

• ミュート状態で自動再生されるようにすることは常に許可される。
• 音声付き自動再生は、次の場合に許可されます。
  • ユーザーがドメインを操作した（クリック、タップなど）。
  • パソコンでは、ユーザーのメディア エンゲージメント インデックスのしきい値を超えている（ユーザーが以前に音声付きの動画を再生したことがある）場合。
  • ユーザーがモバイルでホーム画面にサイトを追加しているか、パソコンに PWA をインストールしている。
• トップフレームで自動再生の権限を iframe に委任して、音声付きの自動再生を許可できます。

メディア エンゲージメント指数

メディア エンゲージメント指数（MEI）は、サイトで個人がメディアを利用する傾向を測定します。Chrome の手法は、オリジンごとのアクセス数と重要なメディア再生イベントの割合です。

• メディア（音声/動画）の再生時間が 7 秒以上であること。
• 音声があり、ミュートが解除されていることが必要です。
• 動画が表示されているタブはアクティブです。
• 動画のサイズ（px）は 200x140 より大きくする必要があります。

Chrome では、これらの情報に基づいてメディア エンゲージメント スコアが計算されます。これは、メディアが定期的に再生されるサイトで最も高いスコアです。サイズが大きければ、メディアの自動再生はパソコンでのみ許可されます。

ユーザーの MEI は about://media-engagement の内部ページで確認できます。

Chrome の「about://media-engagement」内部ページのスクリーンショット。

デベロッパーの切り替え

デベロッパーは、Chrome の自動再生ポリシーの動作をローカルで変更し、ウェブサイトのユーザー エンゲージメントのレベルをさまざまなレベルでテストできます。

• コマンドライン フラグ chrome.exe --autoplay-policy=no-user-gesture-required を使用すると、自動再生ポリシーを完全に無効にできます。これにより、ユーザーがサイトに強い関心を持っているかのようにウェブサイトをテストできます。再生の自動再生は常に許可されます。

• また、MEI を無効にし、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() を呼び出すと、NotAllowedError DOMException で Promise が拒否されます。autoplay 属性も無視されます。

警告: 古い記事では、サポートされていない gesture=media 属性の使用を誤って推奨しています。

例

例 1: ユーザーがノートパソコンで VideoSubscriptionSite.com にアクセスするたびにテレビ番組や映画を見ています。メディア エンゲージメント スコアが高いため、自動再生は許可されます。

例 2: GlobalNewsSite.com にテキストと動画のコンテンツがあります。ほとんどのユーザーは、テキスト コンテンツを求めてサイトにアクセスし、たまにしか動画を視聴しません。 ユーザーのメディア エンゲージメント スコアは低いため、ユーザーがソーシャル メディアのページまたは検索から直接移動した場合、自動再生は許可されません。

例 3: LocalNewsSite.com にテキストと動画のコンテンツがあります。ほとんどのユーザーは、トップページからサイトにアクセスし、ニュース記事をクリックします。ニュース記事のページでの自動再生は、ドメインに対するユーザーの操作により許可されます。ただし、ユーザーがコンテンツの自動再生を驚かないように注意する必要があります。

例 4: MyMovieReviewBlog.com は、レビュー用の映画の予告編を含む iframe を埋め込みます。ユーザーがブログにアクセスするためにドメインを操作したため、自動再生が許可されています。ただし、コンテンツを自動再生するには、ブログがその権限を iframe に明示的に委任する必要があります。

Chrome エンタープライズ ポリシー

キオスクや無人システムなどのユースケースでは、Chrome エンタープライズ ポリシーで自動再生動作を変更できます。自動再生関連のエンタープライズ ポリシーを設定する方法については、ポリシーリストのヘルプページをご覧ください。

• AutoplayAllowed ポリシーは、自動再生を許可するかどうかを制御します。
• AutoplayAllowlist ポリシーを使用すると、自動再生を常に有効にする URL パターンの許可リストを指定できます。

ウェブ デベロッパー向けのおすすめの方法

音声/動画の要素

注意していただきたいのは、動画が再生されるとは想定しないでください。また、動画が実際に再生されていないときに一時停止ボタンを表示しないでください。この投稿をざっと読んだ方のためにもう一度説明しておきます。

重要なポイント: 動画が再生されると想定しないでください。また、動画が実際に再生されていないときに一時停止ボタンを表示しないでください。

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.
  });
}

注意: メディア コントロールを表示せずにインタースティシャル広告を再生しないでください。インタースティシャル広告は自動再生されず、ユーザーが再生を開始できなくなります。

ユーザーを引き付ける方法としては、ミュートされた自動再生を使用してユーザーがミュートの解除を選択できるようにすることです。（下記の例をご覧ください）。Facebook、Instagram、Twitter、YouTube など、一部のウェブサイトではこの機能が効果的に機能しています。

<video id="video" muted autoplay>
<button id="unmuteButton"></button>

<script>
  unmuteButton.addEventListener('click', function() {
    video.muted = false;
  });
</script>

ユーザー アクティベーションをトリガーするイベントは、引き続きブラウザ間で一貫して定義されます。当面の間は "click" の利用をおすすめします。GitHub の問題 whatwg/html#3849 をご覧ください。

ウェブ オーディオ

Web Audio API は、Chrome 71 以降、自動再生に対応しています。注意点がいくつかあります。まず、音声の再生を開始する前に、ユーザーの操作を待ってユーザーが何かを認識できるようにすることをおすすめします。たとえば、「再生」ボタンや「オン/オフ」スイッチだと考えてください。 アプリのフローによっては「ミュート解除」ボタンを追加することもできます。

注: ドキュメントがユーザー操作を受け取る前に AudioContext が作成されると、ドキュメントは「停止」状態で作成されるため、ユーザー操作の後に resume() を呼び出す必要があります。

ページの読み込み時に AudioContext を作成する場合は、ユーザーがページを操作した後（ユーザーがボタンをクリックしたときなど）に resume() を呼び出す必要があります。または、接続されたノードで start() が呼び出された場合、AudioContext はユーザーによる操作後に再開されます。

// Existing code unchanged.
window.onload = function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
}

// One-liner to resume playback when user interacted with the page.
document.querySelector('button').addEventListener('click', function() {
  context.resume().then(() => {
    console.log('Playback resumed successfully');
  });
});

また、ユーザーがページを操作したときに限り、AudioContext を作成することもできます。

document.querySelector('button').addEventListener('click', function() {
  var context = new AudioContext();
  // Setup all nodes
  // ...
});

ブラウザで音声を再生するためにユーザーの操作が必要かどうかを検出するには、ブラウザを作成した後で AudioContext.state を確認します。再生が許可されている場合は、すぐに running に切り替わります。それ以外の場合は suspended になります。statechange イベントをリッスンすると、変更を非同期で検出できます。

例については、https://airhorner.com の自動再生ポリシー ルールでウェブ オーディオの再生を修正する小さな pull リクエストをご覧ください。

注: Chrome の自動再生機能の概要については、Chromium サイトをご覧ください。