サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

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

    このトピックでは、Overlayプラグインの使用方法と、プラグインを実装する方法を学びます Studio そしてカスタムコーディングを通じて。 overlayプラグインを使用して、シンプルなメッセージを半透明のオーバーレイとして player.

    概要

    以下に基づいて、オーバーレイメッセージの表示を制御できます。

    • Player イベント-など play, pause またはカスタムイベント
    • 時間間隔-ビデオ再生中の指定された時間

    以下のサンプルビデオは、オーバーレイプラグインの使用方法を示しています。 開始時にオーバーレイが表示されるほか、XNUMX秒から始まる別の期間も表示されます。 ビデオを開始および一時停止して、これらのイベントにオーバーレイが反応することを確認します。

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

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

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

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

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

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

    • 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 への参照を割り当てる player.
      <script>
        videojs.getPlayer('myPlayerID').ready(function() {
          var myPlayer = this;
        });
      </script>

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

      • 最初のオーバーレイ:
        • これは、 play イベントが送出され、 pause イベントが送出されます。
      • 2番目のオーバーレイ:
        • これは、ビデオ再生が5秒経過すると表示され、ビデオ再生が10秒経過すると非表示になります。
        • これは、の右下隅に配置されています player.
      • 3番目のオーバーレイ:
        • これは、ビデオ再生が12秒経過すると表示され、ビデオ再生が17秒経過すると非表示になります。
        • これは、 player.
        • このオーバーレイには 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-left, top, top-right, right, bottom-right, bottom, bottom-left, left.
    • 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が使用されていません
        attachToControlBar オプションは使用されていません
        (オーバーレイは、コントロールバーが表示されているかどうかに関係なく移動しません)
        attachToControlBarが使用されていません
        attachToControlBar 表示されたコントロールバーと共に使用
        attachToControlBarが使用されていません
        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:
      • 値は文字列または数値です。
      • オーバーレイを非表示にするタイミングを定義します。 値が文字列の場合、イベント名として解釈されます。 数値の場合、ビデオ再生のその時間(秒単位)が経過すると、オーバーレイは非表示になります。 値が文字列の場合、それは Brightcove Player イベント名など play, pause or ended。 すべてのリスト player イベントは Player API.
    • overlays:
      • オーバーレイオブジェクトの配列。
      • オーバーレイオブジェクトは、少なくとも1つの startend オプション。 必要に応じて使用されるその他のオプション。
    • showBackground:
      • 値はブール値です。
      • オーバーレイの周囲に背景のスタイルとパディングを含めるかどうかを決定します。 この設定は、個々のオーバーレイオブジェクトに設定することで上書きできます。
    • start:
      • 値は文字列または数値です。 オーバーレイをいつ表示するかを定義します。
      • 数値の場合、ビデオ再生のその時間(秒単位)が経過するとオーバーレイが表示されます。
      • 値が文字列の場合、それは Brightcove Player イベント名 play, pause or ended。 ここにいくつかの役立つリンクがあります:
      • 動画の再生が始まる前にオーバーレイテキストを表示する例を次に示します。
        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: 'loadedmetadata',
              end: 'play'
            }]
          });
        });

    から送出される任意のイベントを使用できます player、で定義されています Player メソッド/イベントAPI ドキュメント、または独自のカスタムイベントを使用できます。

    これらのプロパティはすべてオプションですが、少なくとも以下を含めないと、奇妙な結果が得られる場合があります startend プロパティ。

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

    オーバーレイを操作する場合、XNUMXつのスタイルが役立ちます。 詳細はこちら。

    背景を隠す

    次の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 サンプル:オーバーレイを切り替える の資料をご参照ください。

    ビデオメタデータを表示する

    ビデオに関する情報をオーバーレイに表示することができます。 たとえば、動画の再生が始まる前に、動画のカスタムフィールドのいずれかからメッセージを表示します。 スクリーンショット を参照してください。

    動画名でオーバーレイする

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

    • 112行目:オーバーレイプラグインのCSSを含めます。
    • 行113〜124:CSSは以下を実行します。
      • のサイズを変更します player
      • メッセージのフォントサイズと色を設定する
      • オーバーレイの幅を設定する
      • オーバーレイの背景色を変更する
    • 128〜135行目:標準のページはめ込み埋め込みコードが使用されています。 注意してください id 追加されます。
    • 136行目:オーバーレイプラグインのJavaScriptコードのソースを指定します。
    • 139,140,152、XNUMX、XNUMX行目:コードを player.
    • 141,151、XNUMX行目: on() のイベントリスナーを追加するメソッド loadstart イベント。 匿名イベントハンドラー関数では、 player、ミュートしたり、 mediainfo オブジェクト。
    • 143,150行目: overlay() 方法。
    • 行144〜149:を使用して単一のオーバーレイを定義します。 content JavaScript変数を使用して、カスタムフィールドに保存されたメッセージを表示するには myPlayer.mediainfo.customfield1。 動画が読み込まれると、オーバーレイが表示されます( start: 'loadedmetadata')、ビデオが開始すると非表示になります(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: 'loadedmetadata',
                end: 'play'
              }]
            });
          });
        });
      </script>
    
    </body>
    </html>

    変更履歴

    見ます 変更履歴はこちら.


    ページの最終更新日:29年2020月XNUMX日