カスタムエンドスクリーンプラグイン

概要

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

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

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

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

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

1. Video Cloud Studioで PLAYERS モジュールと新しいのいずれかを作成します player または見つけます player プラグインを追加する場所。
2. リンクをクリックすると player を開く playerのプロパティ。
3. ナビゲーションヘッダーの 終了画面 左側のナビゲーションメニュー。
4. 次に、 Player 終了画面 タイプを選択し、下矢印をクリックして カスタム.
5. 構成オプションを カスタムHTML テキストボックス。

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

6. ナビゲーションヘッダーの 保存.
7. 公開するには player、クリック 公開と埋め込み>変更の公開.
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（Scalable Vector Graphics）形式であるため、すべてのプラットフォームですばやく読み込まれます。 このため、サイズを変更することはできません。 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：オーバーレイ全体のデフォルトのパディングを削除します。

• 線214-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プロパティをオーバーライドすることで、エンドスクリーンの見た目を創造することができます。 ブラウザで、要素の要素名と値を調べます。 これを行う方法を簡単に確認するには、 カスタマイズ Player 外観 の資料をご参照ください。

マクロを使う

content カスタム終了画面に提供される文字列にマクロが含まれるようになりました（videojs-contrib-adsでサポート）。 たとえば、現在終了画面にあるビデオの名前と説明を終了画面に含めたい場合 player、次のようなコードを使用します。

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

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

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

これは利用可能なマクロの完全なリストです：

  cust_params={mediainfo.ad_keys}

既知の問題点

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

変更履歴

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