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

概要

カスタム エンド スクリーン プラグインを使用すると、動画再生終了時にユーザーが指定した HTML を表示できます。

以下のサンプル動画は、カスタム エンド スクリーン プラグインの使用例を示しています。この短い動画の再生終了後、次の HTML から生成されたテキストが表示されます。

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

Players モジュールを使用した実装

カスタム エンド スクリーンは、エンド スクリーン設定の編集 またはカスタム エンド スクリーン プラグインを使用して実装できます。Players モジュールでカスタム エンド スクリーン プラグインを実装するには、次の手順を実行します。

1. PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プラグインを追加したいプレーヤーを探します。
2. プレーヤーのリンクをクリックし、プレーヤーのプロパティを開きます。
3. 左側のナビゲーションメニューから 終了画面 をクリックします。
4. 次に、プレーヤー終了画面 の種類で下向き矢印をクリックし、カスタム を選択します。
5. カスタム HTML テキストボックスに、エンド スクリーンに表示したい HTML を入力します。以下は例です：

   <div style="text-align:center">
         <p>This video sponsored by</p><br/>
         <img src="http://support.brightcove.com/site-assets/images/site/logos/BeaconLogo.svg"/>
         </div>

   この HTML は、次のようなエンド スクリーンを表示します：

   

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": "<strong>Content</strong> for <em>custom</em> 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"
            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": "<strong>Content</strong> for <em>custom</em> 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"
            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>

プロパティ

以下のプラグイン プロパティは、Custom Endscreen プラグインを制御するために使用されます：

• content:
  • Type: string
  • カスタム エンド スクリーンに表示される任意の文字列リテラルまたは HTML。

エンド スクリーンのカスタマイズ

CSS を使用して、エンド スクリーンの外観をカスタマイズできます。以下にいくつかの例を示します。ページ コンテンツと干渉しないよう、必ず実装をテストしてください。

以下は、動画を再生し終えた後の、再生し直すボタンとソーシャル共有ボタンが表示されたエンド スクリーンです。

ボタンサイズの変更

エンド スクリーンのボタンサイズを変更したいとします。これらのボタンは Scalable Vector Graphics (SVG) 形式なので、CSS の width や height ではサイズを変更できません。

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

次のコードで両方のボタンを小さくできます：

        .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 を追加してエンド スクリーンにコンテンツを表示する方法を説明しました。たとえば次のコードは Brightcove のホームページへのリンクを追加します：

        <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 プロパティを上書きすることで、エンド スクリーンを自由にデザインできます。ブラウザの検証ツールを使用し、要素のクラス名や値を確認しながらカスタマイズしてください。手順の概要は プレーヤー外観のカスタマイズ ドキュメントを参照してください。

マクロの使用

content に指定するカスタム エンド スクリーン用の文字列では、videojs-contrib-ads がサポートするマクロを利用できるようになりました。例えば、現在プレーヤーで再生中の動画名と説明文をエンド スクリーンに表示したい場合、次のようなコードを使用します。

        videojs.getPlayer('myPlayerID').on('loadstart', function() {
          var myPlayer = this;
        
          // +++ エンド スクリーン メソッドの呼び出し +++
          myPlayer.customEndscreen({
            content: '{mediainfo.name} - {mediainfo.description}'
          });
        });

このコードにより、以下のようなエンド スクリーンが表示されます：

使用可能なマクロの一覧は次のとおりです：

        cust_params={mediainfo.ad_keys}

既知の問題

• 非常にまれですが、コントロールバーを常に表示する設定にしている場合で、なおかつカスタム エンド スクリーン プラグインを使用している場合、エンドスクリーン表示後にコントロールバーが正しく動作するよう調整が必要です。デフォルトではエンド スクリーン プラグインがコントロールバーを無効にします。 これを有効にするには、ModalDialog の modalopen イベント発火後に JavaScript の player.controls(true) を呼び出してください。

変更履歴

Custom Endscreen プラグイン リリースノート を参照してください。

過去のリリースノートについては こちらの変更履歴 を参照してください。