Brightcove AirPlay プラグイン

このトピックでは、Brightcove プレーヤーのコンテンツを Apple TV にストリーミングするための Brightcove AirPlay プラグインの使用方法を学びます。

概要

Brightcove AirPlay プラグインを使用すると、Brightcove プレーヤーから Apple TV を搭載した高解像度ディスプレイへ動画をストリーミングできます。Brightcove プレーヤーで AirPlay アイコンをタップするだけで、映画や動画を Apple TV または AirPlay 2 対応のスマート TV に共有できます。

以下の条件をすべて満たしている場合にのみ、プレーヤーのコントロールバーに AirPlay アイコンが表示されます：

Brightcove プレーヤーが Safari ブラウザで開かれている
Brightcove AirPlay プラグインがプレーヤーに追加されている
Safari の Webkit 内蔵 AirPlay 機能が利用可能である

AirPlay アイコン

要件

Brightcove AirPlay プラグインを使用するには、次の要件が必要です：

Brightcove Player v6.51.4 以降

仕組み

AirPlay プラグインを Brightcove プレーヤーと併用する場合、メディアアセットへのリクエストは次のように処理されます：

AirPlay 使用時：Apple TV またはその他の AirPlay デバイスがマニフェスト URL を取得し、アセットのダウンロードを処理します。
AirPlay ミラーリング使用時：送信側デバイスのプレーヤーが動画リクエストとダウンロードを行います。

Studio を使用して実装する

Brightcove AirPlay プラグインをプレーヤーに設定する最も簡単な方法は、Video Cloud Studio を使用することです。

Video Cloud Studio の Players モジュールに移動します。
既存のプレーヤーを開くか、新しいプレーヤーを作成します。
左側のナビゲーションで プラグイン を選択します。
プラグインの追加 ドロップダウンメニューを展開し、Brightcove プラグイン を選択します。

Brightcove プラグイン
Brightcove プラグイン ドロップダウンを展開し、bc-airplay を選択します。

AirPlay プラグイン
保存を選択します。
公開と埋め込み を選択し、続けて 変更の公開 を選択してプレーヤーを公開します。

コードを使用して実装する

プラグインを実装するには、プレーヤーがプラグインコードの場所、必要に応じてスタイルシート、プラグイン名、およびプラグイン設定オプションを認識する必要があります。プラグインコードとスタイルシートの場所は次のとおりです：

プラグインコードを読み込みます：

      https://players.brightcove.net/videojs-bc-airplay/1/videojs-bc-airplay.js

プラグインスタイルを読み込みます：

      https://players.brightcove.net/videojs-bc-airplay/1/videojs-bc-airplay.css

プラグイン名 bcAirplay を使用してプレーヤーに読み込ませます。

以下は Videoタグを使用して、プレーヤーの単一インスタンスに Playlist Endscreen プラグインを関連付ける例です。

      <link href="https://players.brightcove.net/videojs-bc-airplay/2/videojs-bc-airplay.css" rel="stylesheet">
      
      <div style="max-width: 960px;">
        <video-js id="myPlayerID"
          data-account="your account ID"
          data-player="your player ID"
          data-embed="default"
          controls=""
          data-video-id="your video ID"
          data-playlist-id=""
          data-application-id=""
          class="vjs-fluid">
        </video-js>
      </div>
      
      <script src="https://players.brightcove.net/your account ID/your player ID_default/index.min.js"></script>
      
      <!-- Brightcove AirPlay プラグイン用スクリプト -->
      <script src="https://players.brightcove.net/videojs-bc-airplay/2/videojs-bc-airplay.js"></script>
      
      <!-- カスタムスクリプト -->
      <script>
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this;
      
          // Brightcove AirPlay プラグインの初期化
          myPlayer.bcAirplay();
        });
      </script>

変更履歴

Brightcove AirPlay プラグインリリースノートを参照してください。