自動再生に関する考慮事項

このトピックでは、ページ読み込み時に動画を自動再生する際の課題について説明します。

概要

Brightcove プレーヤーを使用してページ読み込み時に動画を自動再生することは、単純な問題ではありません。これは、ブラウザ ベンダーがユーザーの「勝手に動画を再生してほしくない」という要望に応える形で仕様を変更してきたためです。本ドキュメントでは、各ブラウザでの自動再生の現状や、自動再生に影響する Brightcove プレーヤーの設定について詳しく説明します。

要点

詳細は不要で、最適な設定だけ知りたい場合：

クライアントサイド広告なしでの自動再生

クライアントサイド広告がない、または SSAI を使用しているプレーヤーで自動再生を成功させるための最適な手順：

  • autoplay を "any" に設定する
  • iPhone 用に playsinline を true に設定する

クライアントサイド広告ありでの自動再生

自動再生設定は、使用している IMA プラグインのバージョン、または FreeWheel を使用しているかどうかによって異なります。

IMA3（最新）

クライアントサイド広告を使用するプレーヤー（IMA3 プラグイン v4）で自動再生を成功させるための推奨手順：

  • autoplay を "any" に設定
  • iPhone 用に playsinline を true に設定
  • 広告プラグインは、サイドロードや独自ビルドではなく、プレーヤーの JSON 設定で構成する

IMA3 v3 または FreeWheel

クライアントサイド広告を利用するプレーヤー（IMA3 v3 または FreeWheel）で自動再生を成功させるための推奨手順：

  • autoplay を true に設定
  • iPhone 用に playsinline を true に設定
  • 広告プラグインは、サイドロードや独自ビルドではなく、プレーヤーの JSON 設定で構成する

自動再生の設定

Brightcove プレーヤーでは、自動再生に 4 つの値を設定できます。HTML5 仕様では、自動再生は boolean 属性であり、true（オン）または false（オフ）です。Brightcove プレーヤーでは、次の特殊な値も利用できます。

  • Do Not Auto-Play: 視聴者が再生ボタンをクリックするまで play() を呼び出しません。
  • Auto-Play: ソース設定時に play() を呼び出します。
  • Auto-Play Muted: プレーヤーをミュートにし、play() を呼び出します。
  • Auto-Play, muted if blocked: まず play() を呼び出し、失敗した場合はミュートにして再度 play() を呼び出します。

これら 3 つの値はタグ属性では使用できません！

優先順位

Brightcove プレーヤー初期化時に、自動再生設定がどのように評価されるかを以下に示します。

  1. video 要素の属性

    HTML5 標準に従い、属性が存在する場合は true、存在しない場合は false となります。

    他の多くのケースではクエリパラメーターが優先されますが、自動再生については Video.js の仕様に従い属性が最優先されます。

    <video-js autoplay controls></video-js>
  2. URL ハッシュまたはクエリ文字列

    他の多くのケースと異なり、自動再生クエリ パラメーターまたは URL ハッシュは、すべての種類の埋め込みで後方互換性のために尊重されます。

    将来のメジャーリリースでは、Videoタグ埋め込みからは削除される予定です。

    パラメーターが存在すれば true とみなされます（例：?autoplay&foo=bar）。値を文字列で指定することもできます（例：?autoplay=muted&foo=bar）。

    クエリ/ハッシュで autoplay=false を設定することはできません！

  3. videojs()/bc() のオプション

    bc() 関数に自動再生設定を渡すことができます。

  4. JSON 設定

    オプションに自動再生設定がない場合は、プレーヤーの JSON 設定が使用されます。

  5. デフォルト

    上記いずれも該当しない場合、false が使用されます。

ブラウザの設定とポリシー

近年ブラウザ間の動作は統一されつつありますが、主要ブラウザごとの設定とポリシーを以下にまとめます。

Safari（macOS）

Safari（macOS）には次の設定があります：

  • すべての自動再生を許可
  • 音声付きメディアを停止 (デフォルト)
  • 自動再生しない

さらに、サイトごとに設定を変更できます。

Safari（iOS / iPadOS）

iOS と iPadOS の Safari にはユーザー向けの自動再生設定はありませんが、以下のポリシーがあります：

  • ミュートされた自動再生は常に許可される
  • 音声付き自動再生はユーザー操作が必要
  • iPhone では playsinline 属性が必須

詳細は WebKit のブログ記事 を参照してください。

Chrome

Chrome にはユーザー向けの自動再生設定はありませんが、次のポリシーを実装しています：

  • ミュート自動再生は通常動作するが、最終的にはブラウザ次第であり例外的に動作しない場合もある
  • 音声付き自動再生はユーザー操作、または十分に高い MEI（デスクトップ）が必要

詳細は Chrome のブログ記事 を参照。

Firefox

Firefox にはグローバル設定とサイト別設定があります：

  • 音声・動画を許可
  • 音声をブロック (デフォルト)
  • 音声・動画をブロック

Edge

Edge のデフォルト設定：

  • 許可 (デフォルト)
  • 制限

ただし、edge://flags/#edge-autoplay-user-setting-block-option にアクセスすれば、旧 Edge（Legacy）にあった「ブロック」設定を復活させることができます。

Edge（Legacy）

旧 Edge の設定：

  • 許可
  • 制限
  • ブロック

「制限」は、他ブラウザ同様、ミュート再生またはユーザー操作が必要です。

既知の問題

インページソースとプログラムによる自動再生

<source> 要素などのインページソース使用時に play() を呼び出すと問題が発生することが知られています。

Firefox で確認されていますが、他のブラウザにも影響する可能性があります。

Video Cloud のソースはプレーヤー作成後に読み込まれるため、この問題は Brightcove の一般的な利用では発生しません。

代わりに、canplay イベントが発火するまで待ってから play() を呼び出す必要があります。また、autoplay: true を設定することで、ユーザー設定に応じて期待通りに動作する場合もあります。

IMA3 / FreeWheel

プリロール広告が再生されない、または不具合がある

これらのプラグイン使用時、play() を呼び出すと自動再生が失敗し、再生ボタンをクリックしてもプリロールが再生されないケースがあります。

FreeWheel では、プリロールが大きな再生ボタンの「後ろ」で再生されるという報告もあります。

推奨事項

これらのプラグイン使用時の自動再生の推奨設定：

  • プラグインをプレーヤーにバンドルする（例：Studio を使用）。サイドロード（インページ読み込み）は推奨されません。
  • 特殊な自動再生設定は使用しない。autoplay を true に設定し、広告プラグインに任せる。