Brightcove Playerサンプル：

動画終了時にナビゲートこのトピックでは、クリックするとページが新しい URL に移動するビデオ端にオーバーレイを表示する方法を学習します。

プレーヤーの例

非常に短いビデオが完了すると、Brightcoveホームページへのリンクを含むオーバーレイが表示されます。ブライトコーブが提供するオーバーレイプラグインが使用されるため、JavaScript は必要ありません。CSSは、オーバーレイのスタイル設定に使用されます。

ペンを見るビデオエンドに移動 Brightcove Learning Services（ @ rcrooks1969）オンCodePen。

CodePen を使用する

上記のCodePenを効果的に使用するためのヒントは次のとおりです。

[ 結果]ボタンをクリックして、プレーヤーの実際の表示を切り替えます。
HTML/CSS/JSボタンをクリックして、いずれかのコードタイプを表示します。
このドキュメントの後半では、アプリケーションで使用されるロジック、フロー、およびスタイル設定については、 Player/HTML設定、アプリケーションフロー、およびアプリケーションのスタイル設定で説明されます。セクション。これらのセクションの情報に沿って従う最も良い方法は、次のとおりです。
1. CodePen の [ EDIT ON CODEPEN]ボタンをクリックし、1 つのブラウザ/ブラウザタブでコードを使用できるようにします。
2. CodePen で、表示するコードを調整します。CodePen 内の異なるコードセクションの幅を変更できます。
3. を見るプレーヤー/ HTML構成、アプリケーションフローおよび/またはアプリケーションのスタイリング別のブラウザ/ブラウザタブのセクション。これで、コードの説明に従い、同時にコードを表示できるようになります。

API/プラグインリソースを使用

Brightcove Playerプラグイン
オーバーレイプラグインを表示

アプリケーションのスタイリング

CSS は、オーバーレイの外観を変更するために使用されます。このサンプルで使用される CSS は次のとおりです。

/* override default styles for overlay */
.video-js .vjs-overlay {
    width: 100%;
    height: 20%;
    color: #000;
    background-color: rgba(255, 255, 255, 0.8);
    left: 0;
    top: 0;
    padding-top: 5%;
    padding-bottom: 5%;
    margin-top: 10%;
    padding-left: 0;
}

CSS を変更して目的の外観を定義し、インターネットにアクセスできる場所に CSS を保存する必要があります。プラグインの設定でこの CSS をポイントします。

プレーヤー/HTML構成

このセクションでは、プレーヤーの作成時に必要な特別な設定について詳しく説明します。さらに、ページ内埋め込みプレーヤー実装コード以外に、ページに追加する必要があるその他の HTML 要素についても説明します。

プレーヤーの設定

この場合、Studioを使用してディスプレイオーバーレイプラグインを追加します。

を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
プレーヤーのリンクをクリックして、プレイヤーのプロパティを開きます。
左側のナビゲーションメニューで [ プラグイン ] をクリックします。
次に、[ プラグインの追加] をクリックします。
[ プラグイン名 ] に、と入力しますoverlay。

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

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

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

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

[ オプション (JSON)] テキストボックスに構成オプションを入力します。

{
  "content": "<strong>Default overlay content</strong>",
  "overlays": [
    {
      "content": "<a href='http://www.brightcove.com'><span style='font-size:large'><strong>Brightcove Homepage</strong></span></a>",
      "start": "ended",
      "end": "play"
    }
  ]
}

[ 保存] をクリックします。
プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします。
開いているダイアログを閉じるには、[ 閉じる] をクリックします。

その他のHTML

他の HTML 要素はページに追加されません。