Chrome の自動再生ポリシー

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

François Beaufort
François Beaufort
GitHub

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

リーアム・ニーソン: 今すぐ見つけて、一旦止めておきましょう。
ショーン ビーン: ただ単に動画を自動再生するだけではありません。
<ph type="x-smartling-placeholder">
</ph> 「自動再生」のタグが付いたインターネット ミームImgflip と Imgur をご覧ください。

新しい動作

お気づきのように、ウェブブラウザでの自動再生の厳格化が進んでいます ユーザー エクスペリエンスを向上させるために、インストールに対するインセンティブを最小限に抑えます。 広告ブロッカー、費用のかかる制約の多い環境でデータ消費を削減する 接続しますこれらの変更は、ユーザーが再生を細かく制御できるようにすることを 正当なユースケースでパブリッシャー様に利益をもたらします。

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

  • ミュートされた自動再生は常に許可されます。
  • 音声付きの自動再生は、次の場合に許可されます。
  • トップフレームは、目的の iframe に自動再生権限を委任できます。 音声付きの自動再生を許可する。

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

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

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

そのデータに基づいてメディア エンゲージメント スコアが計算されます。これはサイトの中で最も高いスコアです。 定期的にメディアが再生されます。高すぎると、メディアは パソコンでのみ自動再生できます。

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

<ph type="x-smartling-placeholder">
</ph> about://media-engagement の内部ページのスクリーンショット。 <ph type="x-smartling-placeholder">
</ph> 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 属性も無視されます。

例

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

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

例 3: LocalNewsSite.com にはテキスト コンテンツと動画コンテンツの両方があります。ほとんどのユーザーはトップページからサイトにアクセスし、ニュースをクリックする 記事をご覧ください。ニュース記事ページでの自動再生は、次の理由により認められます。 やり取りできます。ただし、コンテンツの自動再生によってユーザーが驚かないように注意する必要があります。

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

Chrome Enterprise ポリシー

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

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

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

音声 / 動画要素

注意点として、動画が再生されると仮定してはいけません。 動画が実際に再生されていないときに一時停止ボタンを表示しないようにする。これは非常に重要であるため、この投稿をざっと読んだだけの方のために、以下にもう一度記載します。

再生関数によって返された 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 以降、自動再生に対応しています。 注意点がいくつかあります。まず、Google Meet の設定が完了するまで ユーザーが認識できるように、音声の再生を開始する前にユーザーの操作を 起こっていることを知ることができます。たとえば、「再生」ボタンや「オン / オフ」スイッチなどです。[ミュート解除] ボタンやボタンを押す必要があります。

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

// 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 イベントをリッスンすると、変更を非同期的に検出できます。

サンプルについては、簡単な pull リクエストをご覧ください。 https://airhorner.com の自動再生ポリシー ルールに適用されるウェブ音声の再生。