Brightcove Player プラグイン

このトピックでは、Brightcove プレーヤーを強化するために Brightcove が提供しているプラグインについて説明します。

追加リソース

以下のドキュメントでは、プラグインの作成と使用について、より深い理解を得ることができます。

イントロダクション

Brightcove プレーヤーのプラグインは、HTML、JavaScript、CSS の組み合わせを使用してプレーヤーをカスタマイズします。つまり、Web ページでできることは、プラグイン内でも実現できます。

一般的に、プラグインは次の目的で開発できます：

  • デフォルト動作の変更
  • 機能の追加
  • 標準の CSS では実現できない外観のカスタマイズ

Brightcove プラグイン

概要：プレーヤー プラグイン のドキュメントには、Brightcove が提供するプラグインとデフォルトで読み込まれるプラグインが一覧表示されています。

Brightcove が提供するプラグインはさまざまな方法で利用できます。すべてのプラグインは Studio の PLAYERS モジュール内にある プラグイン セクションから実装できますが、広告、エンドスクリーン、ソーシャルなど、一部の機能は専用のセクションから読み込むこともできます。以下のスクリーンショットのように、プラグイン セクション内で追加のサポートが提供されるプラグインもあります：

add plugin in Studio
brightcove supplied plugin

Studio でプラグインを追加する

他の方法でプラグインを追加できない場合、またはあえて使用しない場合は、以下のフォームを使用します。まず カスタム プラグイン を選択すると、入力フォームが表示されます。

add plugin in Studio
add plugin in Studio

プラグイン名、JavaScript ファイルへのインターネット経由でアクセス可能なリンク、必要であれば CSS ファイルへのリンク、そしてオプションを追加できます。

デフォルト プラグイン

デフォルトで読み込まれるプラグインは 3 つあります。（実際には、これらはプラグインというよりプレーヤー機能の一部と考えられます。）それらは次のとおりです：

  • DRM：DRM 保護されたコンテンツを、可能な限り幅広いブラウザとデバイスに配信できるようにします。
  • Errors：プレーヤーがエラーに遭遇した際に、ユーザーに分かりやすいメッセージを表示できるようにします。表示は半透明のオーバーレイで、デフォルトのスタイルシートでスタイリングされます。
  • HLS：HLS をサポートしないが Flash Player を持つプラットフォームで HLS 動画を再生します。これにより、m3u8 マニフェスト内の動画コンテンツがプレーヤーで再生可能になります。

特定のプラグインを読み込ませたくない場合、プレーヤーまたは子プレーヤーの作成／更新時に該当するデフォルト プラグインを false に設定することで無効化できます。注意点として、hls、debugger、errors フィールドは POST による新規プレーヤー作成時には configuration プロパティの下に配置する必要があります：

      curl \
        --header "Content-Type: application/json" \
        --user $EMAIL \
        --request POST \
        --data '{
            "name": "MySamplePlayer",
            "configuration": {
              "media": {
                "sources": [{
                  "src":"http://solutions.brightcove.com/bcls/assets/videos/Tiger.mp4",
                  "type":"video/mp4"
                }]
              },
              "hls": false,
              "errors": false
            }
          }' \
          https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players

既存プレーヤーで hls、debugger、errors プラグインを無効化したい場合は、次のように PATCH を使用します：

      curl \
        --header "Content-Type: application/json" \
        --user $EMAIL \
        --request PATCH \
        --data '{
            "hls": true,
            "errors": true
          }' \
        https://players.api.brightcove.com/v2/accounts/$ACCOUNT_ID/players/$PLAYER_ID/configuration

デフォルト プラグインが読み込まれているか確認する方法

URL または Videoタグ埋め込みを利用したプレーヤーを使うとき、ブラウザの Console にアクセスし、対応するプラグイン オブジェクトが存在するか確認することで、プラグインが読み込まれているか判断できます。次のスクリーンショットでは、プラグインが存在している例を示しています。

default-plugin-with-hls

もし特定のデフォルト プラグインを読み込まない設定にしている場合、そのプラグイン オブジェクトはページ内に存在しません。以下のスクリーンショットでは、HLS プラグイン オブジェクトが存在しない例を示しています：

default-plugin-no-hls

データを渡す

plugins とともに options の子プロパティを使用できます。これにより、初期化時にプラグインが利用するデータを渡すことができます。これにより、単一プラグインをさまざまな用途で再利用しやすくなり、柔軟性が大きく向上します。

option プロパティの詳細については、プラグインにデータを渡す ドキュメントを参照してください。

プラグインと postMessage()

iframe プレーヤー実装では、親ページから iframe 内部へデータを送信したい場合があります。これは JavaScript の postMessage() メソッドを使うことで可能です。概要として、親ページで postMessage() を使用してメッセージを iframe に送信し、iframe 側ではイベント リスナーで受信して処理します。

完全な解説と動作例については、iframe 親ページから動画を再生する を参照してください。

スタイルシートの役割

プラグイン本体と、そのプラグイン専用のスタイルシートの両方を使用するケースはよくあります。たとえば、Step-by-Step: Player Management で使用されているシンプルなプラグインでは、JavaScript がプレーヤー上にテキストを配置し、スタイルシートが色・フォントサイズ・位置を制御します。これをベストプラクティスとしてまとめると次のようになります：

  • プラグインには、スタイルシートが最適に処理できる部分を担当させるための関連スタイルシートを用意するべきです。スタイルシートで対応できない場合（例：スタイルシートの動的切り替え）のみ、プラグイン内でスタイルを適用します。

互換性

Brightcove Player はオープンソースの videojs プレーヤーをベースにしています。videojs には多くのプラグインが存在しますが、Brightcove Player と互換性があるのは、Brightcove Player が基づいている videojs とバージョンが一致している場合のみです。Brightcove Player のバージョンは、オープンソース版 videojs より先行している場合や、逆に遅れている場合もあります。