カスタムエンドスクリーン

概要

カスタムエンドスクリーンプラグインを使用すると、ビデオ再生の終了時に、顧客が提供した HTML を表示できます。

以下のサンプルビデオは、カスタムエンドスクリーンプラグインの使用方法を示しています。この短いビデオの最後に、次のHTMLからテキストが表示されます。

<strong>Content</strong> for <em>custom</em> end screen

プレーヤーモジュールを使用して実装する

カスタムエンドスクリーンは、エンドスクリーンのプロパティを編集するか、カスタムエンドスクリーンプラグインを使用して実装できます。Players モジュールを使用してカスタムエンドスクリーンプラグインを実装するには、次の手順に従います。

1. を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
2. プレーヤーのリンクをクリックして、プレイヤーのプロパティを開きます。
3. 左側のナビゲーションメニューで [ End Screens] をクリックします。
4. 次に、[ プレーヤーの終了画面] の種類で、下向き矢印をクリックして [ カスタム] を選択します。
5. 「カスタム HTML」テキストボックスに構成オプションを入力します。

   {
     "content": "<strong>Content</strong> for <em>custom</em> end screen"
   }

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

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

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

https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.css

{
  "content": "Content for custom end screen"
}

  <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.css">

  <video-js id="myPlayerID"
    data-account="1752604059001"
    data-player="decfdaf5-0a6e-43f6-82d3-39d125c413c4"
    data-embed="default"
    data-video-id="4077874637001"
    class="video-js" controls></video-js>

  <script src="https://players.brightcove.net/1752604059001/decfdaf5-0a6e-43f6-82d3-39d125c413c4_default/index.min.js"></script>

  <script type="text/javascript" src="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.customEndscreen({
        "content": "<strong>Content</strong> for <em>custom</em> end screen"
      })
    });
  </script>

{
  "content": "Content for custom end screen"
}

  <link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.css">

  <video-js id="myPlayerID"
    data-account="1752604059001"
    data-player="decfdaf5-0a6e-43f6-82d3-39d125c413c4"
    data-embed="default"
    class="video-js"
    controls></video-js>

  <script src="https://players.brightcove.net/1752604059001/decfdaf5-0a6e-43f6-82d3-39d125c413c4_default/index.min.js"></script>

  <script type="text/javascript" src="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.min.js"></script>

  <script type="text/javascript">
    videojs.getPlayer('myPlayerID').ready(function() {
      var myPlayer = this;
      myPlayer.customEndscreen({
        "content": "<strong>Content</strong> for <em>custom</em> end screen"
      })
    });
  </script>

プロパティ

次のプラグインプロパティは、カスタムエンドスクリーンプラグインを制御するために使用されます。

• content :
  • タイプ: string
  • カスタムエンドスクリーンにレンダリングされる文字列リテラルまたは HTML。

エンドスクリーンをカスタマイズする

CSS を使用して、エンドスクリーンの外観をカスタマイズできます。以下は、あなたができることのいくつかの例です。実装をテストして、ページコンテンツで機能することを確認してください。

これは、ビデオの再開ボタンとソーシャル共有ボタンを備えたエンドスクリーンの表示方法です。

ボタンサイズの変更

たとえば、エンドスクリーンボタンのサイズを変更したいとします。これらのボタンイメージは、スケーラブルベクターグラフィックス (SVG) 形式なので、すべてのプラットフォームにすばやくロードできます。このため、widthおよびheight CSS プロパティを使用してサイズを変更することはできません。

代わりに、これらのボタンは XML テキストファイルであるため、font-size CSS プロパティを使用してサイズを変更できます。

両方のボタンを小さくするには、以下のコードを使用します。

.vjs-overlay-buttons {
  font-size: .5em;
}

パーセンテージ値を使用すると、同じ効果が得られます。

.vjs-overlay-buttons {
  font-size: 50%;
}

結果は次のようになります。

または、各ボタンのサイズを個別に制御できます。

.vjs-restart-control {
  font-size: .5em;
}
.vjs-trigger-social-control {
  font-size: .5em;
}

ボタンの下にコンテンツを移動する

このマニュアルでは、エンドスクリーンにコンテンツを追加する方法について学習しました。確認するには、プラグインに任意の HTML を追加できます。以下のコードは、エンドスクリーンに当社のホームページへのリンクを追加します。

{
  "content": "<a href='https://www.brightcove.com'>Visit our home page</a>"
}

デフォルトでは、追加したコンテンツは終了画面のボタンの上に表示されます。

次のCSSを使用して、HTMLコンテンツを終了画面ボタンの下に配置します。

• 190〜193行目:ボタンを上から配置します。これらの要素は、すでにページの中央に配置されています。
• 194-196号線:オーバーレイ全体のデフォルトのパディングを削除して、カスタムテキストを中央揃えにします。
• 197〜202行目:カスタムテキストを下から配置し、水平方向に中央に配置します。

.vjs-overlay-buttons {
  position: absolute;
  top: 5em;
}
.vjs-custom-overlay {
  padding: 0;
}
.vjs-endscreen-overlay-content {
  position: absolute;
  bottom: 5em;
  text-align: center;
  width: 100%;
}

結果は次のようになります。

垂直方向のコンテンツとボタンを表示する

また、HTML コンテンツのレイアウトや終了画面ボタンを変更することもできます。既定では、ボタンは水平方向に表示され、コンテンツはボタンの上に表示されます。以下のコードは、コンテンツをボタンの左側に浮動させ、ボタンを垂直に表示します。

• 205-210行:ボタンを上から左に配置します。幅が小さいため、ボタンは垂直方向に整列しました。
• 211-213行目:オーバーレイ全体のデフォルトのパディングを削除します。

• 211〜223行目は次のとおりです。カスタムテキストをボタンの左側に配置し、オーバーレイの半分で水平方向と垂直方向の中央に配置します。

.vjs-overlay-buttons {
  position: absolute;
  width: 10%;
  top: 20%;
  left: 50%;
}
.vjs-custom-overlay {
  padding: 0;
}
.vjs-endscreen-overlay-content {
  position: absolute;
  float: left;
  width: 50%;
  text-align: center;
  top: 45%;
  transform: translate(0, -50%)
  -webkit-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
}

結果は次のようになります。

デフォルトのCSSプロパティをオーバーライドすることで、エンドスクリーンの外観を工夫することができます。ブラウザで、要素を検査して、要素クラスの名前と値を検索します。この方法の簡単な確認については、「プレーヤーの外観をカスタマイズする」ドキュメントを参照してください。

マクロの使用

contentカスタムエンドスクリーン用に提供された文字列に、マクロが含まれるようになりました (videojs-contrib-ads でサポートされています)。たとえば、エンドスクリーンに現在プレーヤー内にある動画の名前と説明を含める場合は、次のようなコードを使用します。

videojs.getPlayer('myPlayerID').on('loadstart', function() {
  var myPlayer = this;

  // +++ Call endscreen method +++
  myPlayer.customEndscreen({
    content: '{mediainfo.name} - {mediainfo.description}'
  });
});

これにより、次の終了画面が表示されます。

使用可能なマクロの完全なリストは次のとおりです。

  cust_params={mediainfo.ad_keys}

既知の問題

• コントロールバーを常に手動で表示したままにし、カスタム終了画面プラグインを使用しているという非常にまれな場合は、終了画面が表示された後にコントロールバーが正しく機能するように小さな変更を行う必要があります。デフォルトでは、エンドスクリーンプラグインはコントロールバーを無効にします。コントロールバーを有効にするには、常に表示されるので、player.controls(true)ModalDialogあなたはの後のJavaScriptを使用する必要がありますmodalopenイベントが送出されます。

更新履歴

カスタムエンドスクリーンプラグインのリリースノートを参照してください。

過去のリリースノートについては、ここの changelog を参照してください。