サポートに連絡する| システムステータス
ページコンテンツ

    オーバーレイ表示プラグイン

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

    概要

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

    • プレーヤーイベント -( playpause、カスタムイベントなど)
    • 時間間隔 -ビデオ再生中の指定した時間

    以下のサンプル動画は、オーバーレイ プラグインの使用方法を示しています。オーバーレイは、開始時だけでなく、異なる期間 (5 秒から始まる) に表示されます。ビデオを開始および一時停止して、オーバーレイがこれらのイベントに反応するのを確認します。

    このトピックには、以下のセクションがあります:

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

    Players モジュールを使用してオーバーレイ プラグインを実装するには、次の手順に従います:

    1. Playersモジュールを開き、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを探します。
    2. プレーヤーのリンクをクリックして、プレーヤーのプロパティを開きます。
    3. 左側のナビゲーションで、[プラグイン] をクリックします。
    4. [ プラグインの追加]ドロップダウンメニューを展開し、[ カスタムプラグイン] を選択します。
      Custom Plugin
    5. [ プラグイン名 ] に、overlay と入力します。
    6. JavaScript の URL には、次のように入力します。
      https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js
    7. CSS の URL には、次のように入力します。
      https://players.brightcove.net/videojs-overlay/2/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. オーバーレイ プラグインのデフォルト スタイルシートを追加します。デフォルトのスタイルシートを使用するか、独自のスタイルを作成することができます。
      <link href="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css" rel='stylesheet'>
    2. videojs-overlay.jsスクリプトファイルを追加して、オーバーレイ プラグインを含めます。このプラグインは、ページに含まれると自動的に登録されます。
      <video-js id="myPlayerID"
          data-account="1752604059001"
          data-player="a5bb5681-9bfb-4203-9dac-eb3b98c8b4b2"
          data-embed="default"
          class="video-js" controls>
      </video-js>
      
      <script src="https://players.brightcove.net/1752604059001/a5bb5681-9bfb-4203-9dac-eb3b98c8b4b2_default/index.min.js"></script>
      
      <script src="https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js"></script>
    3. Brightcove Playerへの参照を取得します。この例では、myPlayerという名前の変数を作成し、プレーヤーへの参照を代入しています。
      <script>
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this;
        });
      </script>

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

      • 最初のオーバーレイ:
        • これは、play イベントが送出されたときに表示され、pause イベントが送出されると非表示になります。
      • 2 番目のオーバーレイ:
        • ビデオの再生が 5 秒経過したときに表示され、ビデオ再生が 10 秒経過すると非表示になります。
        • プレーヤーの右下隅に表示されます。
      • 3 番目のオーバーレイ:
        • ビデオの再生が 12 秒経過したときに表示され、ビデオ再生が 17 秒経過すると非表示になります。
        • プレーヤーの左下隅に表示されます。
        • このオーバーレイには、content オプションが定義されていないため、overlays 配列の前に定義された デフォルトのオーバーレイ コンテンツ のデフォルト値が使用されます。
       

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

      <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: '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'
          }]
        });
       });
      </script>

    オプション

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

    • align :
      • 値は、サポートされている文字列値である必要があります。
      • これは、オーバーレイを表示する場所を定義します。デフォルトのスタイルシートを含めると、次の値がサポートされます: top-lefttoptop-rightrightbottom-rightbottombottom-leftleft .
    • attachToControlBar :
      • 値には、文字列またはブール値を指定します。値が文字列の場合は、ControlBar コンポーネントの名前を指定する必要があります。
      • trueまたは文字列値に設定した場合、コントロールバーが最小化されたときに、下揃えオーバーレイの位置が調整されます。これは、下、左下、右下に整列されていないオーバーレイには影響しません。このオプションはデフォルトのコントロールバーで使用されるためのもので、カスタム コントロールバーでは機能しない場合があります。ボトムに整列されたオーバーレイは、指定されたコンポーネントの前に挿入されます。それ以外の場合は、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: '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'
          }]
        });

        または、個々のオーバーレイ オブジェクトに対して:

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

        トップレベルの設定は、個々のオーバーレイ オブジェクトに対するオプションの使用によって上書きすることができます。

    • content :
      • 値には、文字列または DOM オブジェクトを指定できます。
      • これは、オーバーレイに含まれる HTML です。文字列、HTML要素、または DOM DocumentFragment を渡すことができます。
      • デフォルト値は文字列 This overlay will show up while the video is playing
      • このオプションは、トップレベルまたは個々のオーバーレイ オブジェクトに対して設定することもできます。
    • end :
      • 値は、文字列または数値を指定できます。
      • オーバーレイを非表示にするタイミングを定義します。値が文字列の場合は、イベント名として解釈されます。数字の場合、動画再生でその時間(秒単位)が経過すると、オーバーレイは非表示になります。値が文字列の場合、playpauseended などの Brightcove Player イベント名として解釈されます。すべてのプレーヤー イベントのリストは、 Player API にあります。
    • overlays :
      • オーバーレイ オブジェクトの配列。
      • オーバーレイ オブジェクトは、少なくとも startend のオプションで構成する必要があります。他のオプションは必要に応じて使用します。
    • showBackground :
      • 値はブール値です。
      • オーバーレイの周囲に背景のスタイルとパディングを含めるかどうかを決定します。 この設定は、個々のオーバーレイ オブジェクトに設定することで上書きできます。
    • start:
      • 値には、文字列または数値を指定できます。これは、オーバーレイを表示するタイミングを定義します。
      • 数字の場合は、動画再生でその時間(秒単位)が経過したときにオーバーレイが表示されます。
      • 値が文字列の場合、playpauseended などの Brightcove Playerのイベント名として解釈されます。いかに役立つリンクを示します:
      • ビデオの再生が始まる前にオーバーレイ テキストを表示する例を次に示します:
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this;
          myPlayer.overlay({
            content: '<strong>Default overlay content</strong>',
            overlays: [{
              align: "top",
              content: 'This event-triggered overlay message appears before the video starts playing',
              start: 'loadstart',
              end: 'play'
            }]
          });
        });

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

    これらのプロパティはすべてオプションですが、少なくとも startend プロパティを含めないと、おかしな結果になるかもしれません。

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

    オーバーレイを使用する際、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;
    }

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

    ビデオのメタデータの表示

    オーバーレイにビデオに関する情報を表示したい場合があります。たとえば、次のスクリーンショットのように、動画の再生を開始する前に、動画のカスタムフィールドの1つからメッセージを表示します。

    overlay with video name

    次のセクションでは、その特定のタスクを実行する方法について説明しますが、さらに mediainfoオブジェクトのデータを取得すると、いつでもビデオメタデータを表示することができます。

    • 112行目:オーバーレイ プラグイン用の CSS を含めます。
    • 113-124行目:CSS を使用して以下を実行します:
      • プレーヤーのサイズの変更する
      • メッセージのフォントサイズと色を設定する
      • オーバーレイの幅を設定する
      • オーバーレイの背景色を変更する
    • 128~135行目:標準的なページ内埋め込みコードが使用されます。idが追加されていることに注意してください。
    • 136行目:オーバーレイ プラグインの JavaScript コードのソースを指定します。
    • 139,140,152行目:プレーヤーでコードを使用するための標準設定。
    • 141,151行目:on()メソッドを使用して、loadstartイベントのイベントリスナーを追加します。匿名イベントハンドラ関数では、プレーヤーの動画に対してミュートなどの処理を行ったり、mediainfoオブジェクトの情報を使用したりできます。
    • 143,150行目線:overlay()メソッドを呼び出します。
    • 144-149行目:JavaScript変数 myPlayer.mediainfo.customfield1 を使用して、カスタムフィールドに保存されたメッセージを表示する content を使用する、1つのオーバーレイを定義します。オーバーレイは動画がロードされると表示され(start: 'loadstart')そして動画が始まると消えます(end: 'play')。
    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>Video.js Overlay</title>
    
      <link href="https://players.brightcove.net/videojs-overlay/2/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="N1gSjfUW6x"
        data-embed="default"
        class="video-js"
        controls></video-js>
      <script src="https://players.brightcove.net/1507807800001/N1gSjfUW6x_default/index.min.js"></script>
      <script src="https://players.brightcove.net/videojs-overlay/2/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: 'loadstart',
                end: 'play'
              }]
            });
          });
        });
      </script>
    
    </body>
    </html>

    更新履歴

    更新履歴はこちらをご覧ください


    ページの最終更新日30 Sep 2021