オーバーレイプラグインのを使用したプレーヤーオーバーレイの構成

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

NS かぶせるプラグインを使用すると、テキストと画像の両方をオーバーレイとして使用できます。NS かぶせるプラグインは、オーバーレイが表示されるタイミングと期間を構成することもできます。プレーヤーに単純な画像オーバーレイを追加するには、プレーヤーのスタイルオプションを使用します。詳細については、プレーヤーのスタイリングを参照してください。

オーバーレイは、単純なメッセージまたはプレーヤーの上に表示される画像にすることができます。このプレーヤーでは、動画の 6 秒ポイントまで 2 秒の位置に、プレーヤーの右下に Brightcove ロゴが表示されます。

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

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

オーバーレイは、かぶせるプラグイン。プラグインを設定するには、JavaScript URL、CSSファイル、プラグイン名、およびプラグインオプションを指定する必要があります。

かぶせるプラグインオプション

プラグインオプションは、オーバーレイをいつ表示するか、いつ非表示にするか、何を表示するか、どこに表示するかを設定するために使用します。次のプラグインオプション (JSON 形式) がサポートされています。

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

以下のサンプルオプションでは、動画の 2 秒ポイントから始まり、6 秒経過した時点で終了する Brightcove ロゴ画像が表示されます。


{
  "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"
    }
  ]
}

プレーヤーオーバーレイを設定する

を実装するにはかぶせる Playersモジュールを使用するプラグインは、次の手順に従います。

Playersモジュールを開き、プレーヤーを見つけます。
プレーヤーのリンクをクリックして、プレーヤーのプロパティを開きます。
クリックプラグイン左側のナビゲーションで。
プラグインを追加 > カスタムプラグインをクリックします。
のためにプラグイン名、入力かぶせる。

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

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

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

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

オプション (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"
	    }
	  ]
	}

[ プレーヤーを保存して公開する] をクリックします。公開したプレイヤーに変更が表示されるまでに最大5分かかる場合があります。

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

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

ページコンテンツ

オーバーレイプラグインのを使用したプレーヤーオーバーレイの構成

かぶせるプラグインオプション

プレーヤーオーバーレイを設定する