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

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

概要

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 プレーヤーは、autoplay について 4 つの値をサポートしています。HTML5 仕様では、autoplay はブール属性であり、オン (true) またはオフ (false) のいずれかです。Brightcove プレーヤーでは、次の 2 つの特殊な値も利用できます:

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

これら 3 つの値はタグ属性ではサポートされていません！

優先順位

以下のリストは、自動再生を構成できるすべての方法と、Brightcove プレーヤーの初期化プロセスにおいてそれらがどのように優先されるかを示しています。

  1. 動画要素の属性

    HTML5 標準に従い、これは true（属性が存在する）または false（属性が存在しない）のいずれかになります。

    他のプロパティではクエリパラメーターの値（他のケースでは iframe のみ）が優先されますが、ここでは Video.js での動作に倣い、属性が優先されます。

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

    ほとんどのケースとは異なり、autoplay のクエリ文字列パラメーターまたは URL ハッシュパラメーターは、後方互換性のため、すべての種類の埋め込みで尊重されます。

    これは将来のメジャーリリースで、ページ内埋め込みでは削除される予定です。

    パラメーターが存在することは true と同等です（例: ?autoplay&foo=bar）。文字列値もサポートされています（例: ?autoplay=muted&foo=bar）。

    クエリ／ハッシュパラメーター経由で autoplay を false に設定することはできません！

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

    autoplay オプションは bc() 関数に渡すことができます。

  4. JSON 設定

    autoplay がオプションで利用できない場合は、プレーヤーの JSON 設定で渡される値を使用します。

  5. デフォルト

    最後に、上記のいずれも適用されない場合は、デフォルトで false となります。

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

近年、ブラウザの動作はより一貫性のあるものになっていますが、以下のセクションでは、主要なブラウザごとに利用可能な設定およびポリシーをまとめています。

Safari（macOS）

macOS の Safari には次の設定があります:

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

さらに、これらの設定はサイトごとに変更できます。

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（Legacy）には次の設定がありました:

  • 許可
  • 制限
  • ブロック

「制限」オプションは他のブラウザと同様で、ミュートされた自動再生またはユーザー操作が必要です。

既知の問題

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

ページ内ソース（例: <source> 要素経由）を使用して play() を呼び出す場合の既知の問題があります。

これは Firefox で確認されていますが、他のブラウザでも発生する可能性があります。

これは Brightcove のお客様にとって一般的なユースケースではありません。Video Cloud のソースはプレーヤー作成後にロードされるため、この問題は発生しません。

代わりに、play() を呼び出す前に canplay イベントの発火を待つ必要があります。あるいは、autoplay: true を設定すれば、ユーザーの設定や好みに応じて期待どおりに動作します。

IMA3/FreeWheel

プリロールが表示されない、または不具合がある

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

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

推奨事項

これらのプラグインを使用する場合、自動再生を有効にする推奨方法は次のとおりです:

  • プラグインをプレーヤーにバンドルする（例: Studio を介して）。サイドロード（ページ内）は推奨されません。
  • 特殊な autoplay の値は使用しないでください。autoplay を true に設定し、広告プラグインに可能な限り再生を試みさせてください。