ユーザー エクスペリエンスの改善、広告ブロッカーのインストールを促すインセンティブの最小化、データ使用量の削減を実現
2018 年 4 月に Chrome の自動再生ポリシーが変更されました。この動画では、それが音声付き動画の再生にどう影響するかを説明します。ユーザーはこれを気に入るでしょう。
新しい動作
お気づきのように、ウェブブラウザは、ユーザー エクスペリエンスを改善し、広告ブロッカーをインストールするインセンティブを最小限に抑え、高価なネットワークや制約されたネットワークでのデータ消費量を減らすために、より厳格な自動再生ポリシーに移行しつつあります。これらの変更は、ユーザーが再生をより細かく制御できるようにし、正当なユースケースでパブリッシャーにメリットをもたらすことを目的としています。
Chrome の自動再生ポリシーはシンプル:
- ミュートされた自動再生は常に許可されます。
- 音声付きの自動再生は、次の場合に許可されます。
- ユーザーがドメインを操作(クリック、タップなど)した。
- パソコンでは、ユーザーの Media Engagement Index のしきい値を超えています。これは、ユーザーが以前に音声付きの動画を再生したことがあることを意味します。
- ユーザーがモバイルでホーム画面にサイトを追加しているか、パソコンに PWA をインストールしている。
- トップフレームでは、iframe に自動再生権限を委任して、音声付きの自動再生を許可できます。
メディア エンゲージメント指数
Media Engagement Index(MEI)は、ユーザーがサイトでメディアを消費する傾向を示すものです。Chrome のアプローチは、オリジンごとの重要なメディア再生イベントに対するアクセス数の割合です。
- メディア(音声/動画)の消費量は 7 秒を超える必要があります。
- 音声が存在し、ミュートが解除されている必要があります。
- 動画のタブがアクティブになっています。
- 動画のサイズ(px)は 200×140 より大きくしてください。
これらに基づき、Chrome はメディア エンゲージメント スコアを計算します。これは、メディアが定期的に再生されるサイトで最も高いです。高すぎると、パソコンでのみメディアの自動再生が許可されます。
ユーザーの MEI は 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 エンタープライズ ポリシー
キオスクや無人システムなどのユースケースでは、Chrome エンタープライズ ポリシーを使用して自動再生の動作を変更できます。自動再生関連のエンタープライズ ポリシーを設定する方法については、ポリシーリストのヘルプページをご覧ください。
AutoplayAllowed
ポリシーは、自動再生を許可するかどうかを制御します。AutoplayAllowlist
ポリシーを使用すると、自動再生を常に有効にする URL パターンの許可リストを指定できます。
ウェブ デベロッパー向けのおすすめの方法
音声/動画要素
重要な点を 1 つ覚えておいてください。動画が再生されると仮定しないでください。また、動画が実際に再生されていないときに一時停止ボタンを表示しないでください。非常に重要なので、この投稿にざっと目を通している人のために、もう一度後でもう一度説明します。
常に 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 をご覧ください。
ウェブ オーディオ
Chrome 71 以降では、Web Audio API が自動再生に対応しています。注意点がいくつかあります。まず、音声の再生を開始する前にユーザー操作を待機して、ユーザーが何かが発生していることを認識できるようにすることをおすすめします。たとえば、「再生」ボタンや「オン/オフ」スイッチのようなものです。 アプリの流れに応じて「ミュート解除」ボタンを追加することもできます。
ページの読み込み時に 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 リクエストをご覧ください。