Overlay プラグインを使用したプレーヤーオーバーレイの設定

このトピックでは、Players モジュールを使用してプレーヤーに overlay プラグインを追加する方法について説明します。

Overlay プラグインを使用すると、テキストと画像の両方をオーバーレイとして使用できます。overlay プラグインでは、オーバーレイが表示されるタイミングや表示時間も設定できます。プレーヤーに簡単な画像オーバーレイを追加するには、プレーヤーのスタイリングオプションを使用します。詳細についてはプレーヤーのスタイリングを参照してください。

オーバーレイは、プレーヤーの上に表示されるシンプルなメッセージや画像です。このプレーヤーでは、Brightcove のロゴが動画の 2 秒から 6 秒までの間、プレーヤーの右下に表示されます。

オーバーレイの表示は、次の条件に基づいて制御できます。

プレーヤーイベント - 再生、一時停止、カスタムイベントなどのプレーヤーイベントに基づいてオーバーレイを表示します
時間間隔 - 動画再生中の指定したタイミングでオーバーレイを表示します

オーバーレイは overlay プラグインを使用して設定します。プラグインを設定する際には、JavaScript の URL、CSS ファイル、プラグイン名、およびプラグインオプションを指定する必要があります。

Overlay プラグインのオプション

プラグインオプションは、オーバーレイを表示するタイミング、非表示にするタイミング、表示する内容、表示位置を設定するために使用されます。次のプラグインオプション（JSON 形式）がサポートされています。

start - オーバーレイを表示するタイミングを定義します。値は文字列または数値で指定できます。数値の場合は、動画再生中にその秒数を経過した時点でオーバーレイが表示されます。文字列の場合は、play、pause、ended などの Brightcove Player のイベント名として解釈されます。すべてのプレーヤーイベントの一覧は、Player API にあります。
end - オーバーレイを非表示にするタイミングを定義します。値は文字列または数値で指定できます。数値の場合は、動画再生中にその秒数を経過した時点でオーバーレイが非表示になります。文字列の場合は、play、pause、ended などの Brightcove Player のイベント名として解釈されます。すべてのプレーヤーイベントの一覧は、Player API にあります。
content - オーバーレイとして表示する内容を定義します。値は文字列または DOM オブジェクトで指定できます。文字列、HTML 要素（画像）、または DOM DocumentFragment を渡すことができます。
align - オーバーレイの表示位置を定義します。次の値がサポートされています: top-left, top, top-right, right, bottom-right, bottom, bottom-left, left

次のサンプルオプションでは、動画の 2 秒地点から Brightcove のロゴ画像が表示され、6 秒地点を経過した時点で非表示になります。


{
  "overlays": [
    {
      "start": 2,
      "end": 6,
      "content": "<a href='https://www.brightcove.com' target='_blank'>
      <img alt='Brightcove Logo' src='http://solutions.brightcove.com/bcls/assets/images/brightcove-logo.png'></a>",
      "align": "bottom-right"
    }
  ]
}

コンテンツには、適切な HTML タグおよびその属性を含めることができます（たとえば、上記の例では画像に alt テキストが指定されていることに注意してください）。

プレーヤーオーバーレイの設定

Players モジュールを使用して Overlay プラグインを実装するには、次の手順に従ってください。

Players モジュールを開き、対象のプレーヤーを見つけます。
プレーヤーのリンクをクリックして、プレーヤープロパティを開きます。
Overview タブの Plugins セクションを展開します。
Add a Plugin > Custom Plugin をクリックします。
Plugin Name には、overlay と入力します。

JavaScript URL には、次の URL を入力します。

//players.brightcove.net/videojs-overlay/3/videojs-overlay.min.js

CSS URL には、次の URL を入力します。

//players.brightcove.net/videojs-overlay/3/videojs-overlay.css

Options(JSON) を入力します。次の例では、2 秒地点から 6 秒地点までの間、プレーヤーの下部にクリック可能な画像が表示されます。

{
    "overlays": [
      {
        "start": 2,
        "end": 6,
        "content": "<a href='https://www.brightcove.com' target='_blank'><img src='http://solutions.brightcove.com/bcls/assets/images/brightcove-logo.png'></a>",
        "align": "bottom-right"
      }
    ]
  }

Publish Changes をクリックします。変更内容が公開済みのプレーヤーに反映されるまで、最大 5 分かかる場合があります。

1 つのプレーヤーに複数のオーバーレイを設定することもできます。詳細については、開発者向けドキュメントを参照してください。

CSS を使用してプレーヤーオーバーレイをスタイル設定する方法の例については、ロゴ Overlay プラグインの開発者向けドキュメントを参照してください。