プレイリストエンドスクリーンプラグイン

概要

Playlist Endscreen プラグインを使用すると、ビデオの終了時にプレイリストを表示できます。このプレイリストは、スマートプレイリストを使用して、関連するビデオ、またはメインビデオとは無関係な動画にすることができます。

ユーザーは、UI の終了画面ボタンをクリックして、プレイリストの終了画面を表示することもできます。ボタンのツールチップには、プラグインのタイトルが使用されます。この場合、デフォルトの「関連動画」が使用されます。

例

この例では、メインビデオが終了したときに関連する動画のプレイリストを示します。

ペンを見るプレイリストエンドスクリーンプラグイン Brightcove Learning Services（ @ bcls1969） オンCodePen。

要件

Playlist Endscreen プラグインを使用するには、次の要件が必要です。

• ブライトコーブプレイヤー v6.51.3 以降

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

プレイリストの終了画面は、Video Cloud Studio のプレーヤーモジュールを使用して実装できます。詳細については、Playlist-endscreen プラグインを使用したプレイリストの終了画面の構成ドキュメントを参照してください。

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

プラグインを実装するには、プラグインコードの場所、必要に応じてスタイルシート、プラグイン名、プラグイン設定オプションを知る必要があります。プラグインコードとスタイルシートの場所は次のとおりです。

1. プラグインコードを含めます。

   https://players.brightcove.net/videojs-playlist-endscreen/1.0.4/videojs-playlist-endscreen.js

2. プラグインのスタイルを含めます。

   https://players.brightcove.net/videojs-playlist-endscreen/1.0.4/videojs-playlist-endscreen.css

3. プラグイン名を使用して、プレイヤーにロードします。playlistEndscreen

4. オプションのセットの例を次に示します。

   {
     "playlistId": "4602525726001",
     "title": "Watch More"
   }

5. Advanced Embed 実装を使用して、プレイリストの終了画面プラグインをプレーヤーの単一のインスタンスに関連付ける例を示します。

   <link href="https://players.brightcove.net/videojs-playlist-endscreen/1.0.4/videojs-playlist-endscreen.css" rel="stylesheet">
     
     <div style="max-width: 960px;">
     <video-js id="myPlayerID"
       data-account="your account ID"
       data-player="your player ID"
       data-embed="default"
       controls=""
       data-video-id="your video ID"
       data-playlist-id=""
       data-application-id=""
       class="vjs-fluid">
     </video-js>
   </div>
   <script src="https://players.brightcove.net/your account ID/your player ID_default/index.min.js"></script>
   
   <!-- script for the Playlist Endscreen plugin -->
   <script src="https://players.brightcove.net/videojs-playlist-endscreen/1.0.4/videojs-playlist-endscreen.js"></script>
   
   <!-- custom script -->
   <script>
     videojs.getPlayer('myPlayerID').ready(function() {
       var myPlayer = this;
   
       // initialize the Playlist Endscreen plugin
       myPlayer.playlistEndscreen({"playlistId": "your playlist ID"}); 
     });
   </script>

オプション

初期化時に options オブジェクトをプラグインに渡すことができます。このオブジェクトには、次のいずれかのオプションを含めることができます。

プレイリストID

• 終了画面に表示されるプレイリスト ID を表す文字列。
• タイプ : string
• ディフォルト：""

タイトル

• 終了画面のタイトルをカスタマイズする文字列。これにより、ボタンのツールチップも変更されます。
• タイプ : string
• ディフォルト："Related videos"

プレイリスト ID の設定

このプラグインにはプレイリストの ID が必要です。プレイリストが Playback API から取得され、結果を使用して終了画面が表示されます。プレイリスト ID は、次のいずれかのソースから取得する必要があります。

• ページ内埋め込みの属性: data-endscreen-playlist-id="123456789"

• iframe のクエリ文字列: &endscreenPlaylistId=123456789

• プラグインオプション: player.playlistEndscreen({"playlistId": "123456789"})

  これは、上の例のように、プレーヤーの設定に追加したり、実行時に使用できます。

• プログラムによるプラグイン後処理: player.playlistEndscreen().setPlaylistId("123456789")

更新履歴

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