Display Overlay プラグイン

このトピックでは、Overlay プラグインの使用方法と、Studio およびカスタム コードを使用した実装方法について説明します。Overlay プラグインは、プレーヤーの上に半透明のオーバーレイとしてシンプルなメッセージを表示するために使用できます。

概要

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

  • プレーヤーイベント（play、pause、またはカスタム イベントなど）
  • 時間間隔（動画再生中の指定した時刻）

以下のサンプル動画は、Overlay プラグインの使用例を示しています。再生開始時および異なる時間帯（5 秒から開始するものなど）にオーバーレイが表示されます。動画を再生および一時停止して、イベントに応じてオーバーレイがどのように反応するかを確認してください。

このトピックには、次のセクションが含まれています。

Players モジュールを使用した実装

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

  1. PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したい既存のプレーヤーを選択します。
  2. プレーヤーのリンクをクリックして、プレーヤーのプロパティを開きます。
  3. 左側のナビゲーションで プラグイン をクリックします。
  4. プラグインの追加 のドロップダウンメニューを展開し、カスタム プラグイン を選択します。
    Custom Plugin
  5. プラグイン名 には overlay を入力します。
  6. JavaScript URL には、次を入力します。 
    https://players.brightcove.net/videojs-overlay/3/videojs-overlay.min.js
  7. CSS URL には、次を入力します。 
    https://players.brightcove.net/videojs-overlay/3/videojs-overlay.css
  8. オプション(JSON) テキストボックスに設定オプションを入力します。以下の例では、再生開始から 2 秒後に表示され、6 秒で終了する、プレーヤー下部に配置されたアンカーが表示されます。 
          {
        "overlays": [
          {
            "align": "bottom",
            "start": 2,
            "end": 6,
            "content": "<a href='http://www.brightcove.com'>Proceed to Home Page</a>"
          }
        ]
      }
  9. フォームが次のように表示されていることを確認します。
    Overlay Plugin
  10. 保存 をクリックします。
  11. プレーヤーを公開するには、公開と埋め込み > 変更の公開 をクリックします。
  12. 開いているダイアログを閉じるには、閉じる をクリックします。

コードを使用した実装

カスタム コードを使用してプラグインを実装するには、次のプラグイン プロパティを設定します。

  • scripts - プラグイン用に提供される JavaScript。プラグイン実装の違いによって変更されることはありません
  • stylesheets - プラグイン用に提供される CSS。プラグイン実装の違いによって変更されることはありません
  • plugin name - 常に overlay
  • plugin options - プロパティと値の配列を含みます

コードにプラグインを追加するには、次の手順に従ってください。

  1. Overlay プラグインのデフォルト スタイルシートを追加します。デフォルトのスタイルシートを使用することも、独自のスタイルを作成することもできます。 
    <link href="https://players.brightcove.net/videojs-overlay/3/videojs-overlay.css" rel='stylesheet'>
  2. Overlay プラグインを含めるために videojs-overlay.js スクリプト ファイルを追加します。このプラグインは、ページに含めると自動的に自身を登録します。 
            <video-js id="myPlayerID"
            data-account="1752604059001"
            data-player="972ee851-3d7e-43a0-8db1-2c6fb06bad34"
            data-embed="default"
            controls="">
        </video-js>
        
        <script src="https://players.brightcove.net/1752604059001/972ee851-3d7e-43a0-8db1-2c6fb06bad34_default/index.min.js"></script>
        
        <script src="https://players.brightcove.net/videojs-overlay/3/videojs-overlay.min.js"></script>
  3. Brightcove Player への参照を取得します。この例では、myPlayer という変数を作成し、プレーヤーへの参照を代入しています。 
            <script>
          videojs.getPlayer('myPlayerID').ready(function() {
            var myPlayer = this;
          });
        </script>

    オーバーレイ メッセージを表示するには、options プロパティを使用してプラグインにデータを渡します。この例では、3 つのオーバーレイ メッセージを含める方法を示しています。

    • 1 つ目のオーバーレイ:
      • play イベントが発火されたときに表示され、pause イベントが発火されたときに非表示になります。
    • 2 つ目のオーバーレイ:
      • 動画再生が 5 秒を超えたときに表示され、10 秒を超えたときに非表示になります。
      • プレーヤーの右下に配置されます。
    • 3 つ目のオーバーレイ:
      • 動画再生が 12 秒を超えたときに表示され、17 秒を超えたときに非表示になります。
      • プレーヤーの左下に配置されます。
      • このオーバーレイには content オプションが定義されていないため、overlays 配列の前で定義されている Default overlay content のデフォルト値が使用されます。
     

    オーバーレイ スクリプトをコードに含めた場合、次のようにメッセージを定義できます。

            <script id="pageScript" type="text/javascript">
          videojs.getPlayer('myPlayerID').ready(function() {
            var myPlayer = this;
            myPlayer.overlay({
            content: '<strong>Default overlay content</strong>',
            overlays: [{
              align: "top",
              content: '動画再生中に表示される、イベント トリガー型のオーバーレイ メッセージです',
              start: 'play',
              end: 'pause'
            }, {
              content: '5 秒から 10 秒の間に表示される、時間指定のオーバーレイ メッセージです',
              start: 5,
              end: 10,
              align: 'bottom-right'
            }, {
              start: 12,
              end: 17,
              align: 'bottom-left'
            }]
          });
         });
        </script>

オプション

以下のプラグイン オプションは、オーバーレイ オブジェクトを制御するために使用されます。

  • align:
    • 値には、サポートされている文字列値を指定する必要があります。
    • オーバーレイを表示する位置を定義します。デフォルトのスタイルシートを含めている場合、次の値がサポートされます： top-left、 top、 top-right、 right、 bottom-right、 bottom、 bottom-left、 left。
  • attachToControlBar:
    • 値には文字列または boolean を指定できます。文字列の場合は、ControlBar コンポーネントの名前を指定する必要があります。

    • true または文字列値に設定すると、下部に配置されたオーバーレイは、コントロールバーが最小化された際に位置が調整されます。この設定は、bottom、bottom-left、bottom-right 以外に配置されたオーバーレイには影響しません。このオプションはデフォルトのコントロールバー向けであり、カスタム コントロールバーでは動作しない場合があります。下部に配置されたオーバーレイは、指定されたコンポーネントの前に挿入されます。それ以外の場合は、ControlBar の最初の子コンポーネントの前に挿入されます。その他のすべてのオーバーレイは、ControlBar コンポーネントの前に挿入されます。

    • このオプションは、トップレベルで指定することで、対象となるすべての配置に対して設定できます。 
              myPlayer.overlay({
          content: 'Default overlay content',
          attachToControlBar : true,
          overlays: [{
            align: "top",
            content: 'This event-triggered overlay message appears when the video is playing',
            start: 'play',
            end: 'pause'
          }, {
            content: 'This timed overlay message appears between 5 and 10 seconds',
            start: 5,
            end: 10,
            align: 'bottom-right'
          }, {
            start: 12,
            end: 17,
            align: 'bottom-left'
          }]
        });

      または、個々のオーバーレイ オブジェクトごとに設定することもできます。

              myPlayer.overlay({
          content: 'Default overlay content',
          overlays: [{
            align: "top",
            content: 'This event-triggered overlay message appears when the video is playing',
            start: 'play',
            end: 'pause'
          }, {
            content: 'This timed overlay message appears between 5 and 10 seconds',
            start: 5,
            end: 10,
            align: 'bottom-right'
          }, {
            start: 12,
            end: 17,
            align: 'bottom-left',
            attachToControlBar : true
          }]
        });

      トップレベルで設定した値は、個々のオーバーレイ オブジェクトで指定したオプションによって上書きできます。

    • 視覚的な違いは、次のスクリーンショットで確認できます。
      attachToControlBar not used
      attachToControlBar オプションを使用していない場合
      （コントロールバーの表示／非表示に関わらず、オーバーレイは移動しません）
      attachToControlBar not used
      attachToControlBar を使用し、コントロールバーが表示されている状態
      attachToControlBar not used
      attachToControlBar を使用し、コントロールバーが非表示の状態
      （コントロールバーの表示状態に応じてオーバーレイが移動します）
  • class:
    • オーバーレイ要素に追加するカスタム HTML クラスです。通常のクラスセレクターと同様にスタイルを定義しますが、スタイルが上書きされないように、選択したセレクターとあわせて .video-js セレクターを使用する必要があります（詳細度を高める必要があります）。 
      .video-js .customOverlay {
color: yellow;
background-color: red;
}
    • このオプションは、トップレベルで指定することで、対象となるすべての配置に対して設定できます。 
      myPlayer.overlay({
content: 'Default overlay content',
class: 'customOverlay',
overlays: [{
align: "top",
content: '動画再生中に表示される、イベント トリガー型のオーバーレイ メッセージです',
start: 'play',
end: 'pause'
}, {
content: '5 秒から 10 秒の間に表示される、時間指定のオーバーレイ メッセージです',
start: 5,
end: 10,
align: 'bottom-right'
}]
});

      または、個々のオーバーレイ オブジェクトごとに設定することもできます。

      myPlayer.overlay({
content: 'Default overlay content',
overlays: [{
class: 'customOverlay',
align: "top",
content: '動画再生中に表示される、イベントトリガー型のオーバーレイ メッセージです',
start: 'play',
end: 'pause'
}, {
class: 'customOverlay2',
content: '5 秒から 10 秒の間に表示される、時間指定のオーバーレイ メッセージです',
start: 5,
end: 10,
align: 'bottom-right'
}]
});

      トップレベルで設定した値は、個々のオーバーレイ オブジェクトで指定したオプションによって上書きできます。

  • content:
    • 値には文字列または DOM オブジェクトを指定できます。
    • オーバーレイ内に表示される HTML を指定します。文字列、HTML 要素、または DOM DocumentFragment を渡すことができます。
    • デフォルト値は文字列 This overlay will show up while the video is playing です。
    • このオプションは、トップレベル、または個々のオーバーレイ オブジェクトに設定できます。
  • end:
    • 値には文字列または数値を指定できます。
    • オーバーレイを非表示にするタイミングを定義します。値が文字列の場合はイベント名として解釈されます。数値の場合は、動画再生中にその時間（秒）が経過した時点でオーバーレイが非表示になります。文字列の場合は、play、pause、ended などの Brightcove Player のイベント名として解釈されます。すべてのプレーヤーイベントの一覧は、Player API に記載されています。
  • overlays:
    • オーバーレイ オブジェクトの配列です。
    • オーバーレイ オブジェクトには、少なくとも start および end オプションを含める必要があります。その他のオプションは必要に応じて指定できます。
  • showBackground:
    • 値は boolean です。
    • オーバーレイの周囲に背景スタイルおよび余白を含めるかどうかを指定します。この設定は、個々のオーバーレイ オブジェクトで指定することで上書きできます。
  • start:
    • 値には文字列または数値を指定できます。オーバーレイを表示するタイミングを定義します。
    • 数値の場合は、動画再生中にその時間（秒）が経過した時点でオーバーレイが表示されます。
    • 値が文字列の場合は、play、pause、ended などの Brightcove Player のイベント名として解釈されます。参考となるリンクは以下のとおりです。
    • 以下は、動画の再生開始前にオーバーレイ テキストを表示する例です。 
      videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
myPlayer.overlay({
content: '<strong>Default overlay content</strong>',
overlays: [{
align: "top",
content: '動画の再生開始前に表示される、イベント トリガー型のオーバーレイ メッセージです',
start: 'loadstart',
end: 'play'
}]
});
});

Player Methods/Events API ドキュメントで定義されている、プレーヤーから発火される任意のイベントを使用することも、独自のカスタム イベントを使用することもできます。

これらのプロパティはすべて任意ですが、少なくとも start と end プロパティを指定しない場合、意図しない動作が発生する可能性があります。

オーバーレイのスタイリング

オーバーレイを使用する際に役立つ 2 つのスタイルがあります。以下で詳しく説明します。

背景を非表示にする

次の CSS を使用すると、背景を非表示にできます。

.vjs-overlay.vjs-overlay-top.vjs-overlay-background {
  width: 100 % ;
  margin: auto;
  left: 0;
  background: none;
}

オーバーレイを非表示にする

次の CSS を使用すると、オーバーレイを非表示にできます。

.hide-overlay.vjs-overlay {
  display: none;
}

これら 2 つのスタイルはいずれも、 Brightcove Player サンプル: オーバーレイの切り替え ドキュメントで役立ちます。

動画メタデータの表示

オーバーレイに動画に関する情報を表示したい場合があります。たとえば、以下の スクリーンショット に示すように、動画の再生開始前に、動画のカスタムフィールドのいずれかに保存されているメッセージを表示できます。

overlay with video name

次のセクションでは、この具体的なタスクの実装方法を説明しますが、さらに、mediainfo オブジェクトからデータを取得できれば、任意の動画メタデータを、任意のタイミングで表示できます。

  • 112 行目: Overlay プラグイン用の CSS を読み込みます。
  • 113〜124 行目: 次を行うための CSS を定義します。
    • プレーヤーのサイズを変更する
    • メッセージのフォントサイズと色を設定する
    • オーバーレイの幅を設定する
    • オーバーレイの背景色を変更する
  • 128〜135 行目: 標準のインページ埋め込みコードを使用しています。id が追加されている点に注意してください。
  • 136 行目: Overlay プラグイン用 JavaScript のソースを指定します。
  • 139、140、152 行目: プレーヤーでコードを使用するための標準的なセットアップです。
  • 141、151 行目: on() メソッドを使用して loadstart イベントのイベント リスナーを追加します。無名のイベント ハンドラー関数内では、プレーヤー内の動画に対して、ミュートの設定や mediainfo オブジェクトの情報の利用などの処理を行えます。
  • 143、150 行目: overlay() メソッドを呼び出します。
  • 144〜149 行目: 単一のオーバーレイを定義し、JavaScript 変数 myPlayer.mediainfo.customfield1 を使用して、カスタム フィールドに保存されているメッセージを content として表示します。オーバーレイは動画が一時停止した時点（start: 'pause'）で表示され、動画の再生が開始されると（end: 'play'）非表示になります。 
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Video.js Overlay</title>

  <link href="https://players.brightcove.net/videojs-overlay/3/videojs-overlay.css" rel='stylesheet'>
  <style type="text/css">
    .video-js {
      width: 600px;
      height: 338px;
    }
    .vjs-overlay.vjs-overlay-bottom-left {
      font-size: 1.5em;
      width: 60%;
      color: red;
      background-color: black;
    }
  </style>
</head>
<body>

  <video-js id="myPlayerID"
    data-video-id="3495887198001"
    data-account="1507807800001"
    data-player="default"
    data-embed="default"
    controls=""></video-js>
  <script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
  <script src="https://players.brightcove.net/videojs-overlay/3/videojs-overlay.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.on('loadstart',function() {
        myPlayer.muted(true);
        myPlayer.overlay({
          overlays: [{
            align: 'bottom-left',
            content: myPlayer.mediainfo.custom_fields.customfield1,
            start: 'pause',
            end: 'play'
          }]
        });
      });
    });
  </script>

</body>
</html>

変更履歴

こちらの変更履歴を参照してください。