Chrome の自動再生ポリシー

ユーザー エクスペリエンスの向上、広告ブロッカーをインストールする動機の軽減、データ使用量の削減

François Beaufort
François Beaufort
GitHub

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

リーアム ニーソン: 必ず見つけ出して、停止してやる。
ショーン ビーン: ただ単に動画を自動再生するだけではありません。
Imgflip と Imgur で見つかった「自動再生」のタグが付けられたインターネット ミームは、次のとおりです。

新しい動作

ご存じのとおり、ウェブブラウザでは、ユーザー エクスペリエンスの向上、広告ブロッカーのインストールを誘発する要因の最小化、高額または制限のあるネットワークでのデータ使用量の削減を目的として、自動再生ポリシーが厳格化されています。これらの変更は、ユーザーが再生をより細かく制御できるようにし、正当なユースケースを持つパブリッシャーにメリットをもたらすことを目的としています。

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

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

メディア エンゲージメント指数（MEI）は、サイト上でメディアを消費する個人の傾向を測定します。Chrome のアプローチは、オリジンあたりの重要なメディア再生イベントへのアクセス数と、

  • メディア（音声/動画）の消費時間が 7 秒を超えている必要があります。
  • 音声が存在し、ミュートされていない必要があります。
  • 動画が表示されているタブがアクティブになっている。
  • 動画のサイズ（ピクセル単位）は 200x140 より大きくする必要があります。

Chrome は、この情報に基づいてメディア エンゲージメント スコアを計算します。このスコアは、メディアが定期的に再生されるサイトで最も高くなります。十分な速度が確保されている場合は、デスクトップでのみメディアの自動再生が許可されます。

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

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 でプロミスを拒否します。また、autoplay 属性も無視されます。

例

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

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

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

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

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

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

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

ウェブ デベロッパー向けのベスト プラクティス

音声/動画要素

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

再生関数によって返された 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 playsinline autoplay>
<button id="unmuteButton"></button>

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

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

Web Audio

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

ページの読み込み時に 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 の自動再生ポリシー ルールの Web Audio 再生を修正する小さなプル リクエストをご覧ください。