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

このトピックでは、動画の終了時にプレイリストを表示する方法について説明します。Video Cloud Studio を使用する方法、または Brightcove Player を使用してコードで追加する方法のいずれかで、プレーヤーに追加できます。

概要

Playlist Endscreen プラグインを使用すると、動画の再生終了時にプレイリストを表示できます。このプレイリストには、スマートプレイリストを使用した関連動画を表示することも、メイン動画とは関連しない動画を表示することも可能です。

エンドスクリーンが表示される条件	エンドスクリーンが表示されない条件
プレイリスト ID が設定されている、かつプラグインが有効になっている	プレイリスト ID が指定されていない実行時にプレイリスト ID が未設定になっているプラグインが無効になっている

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

Playlist Endscreen button — Playlist Endscreen ボタン

例

この例では、メイン動画の再生終了時に関連動画のプレイリストを表示します。

See the Pen Playlist Endscreen Plugin by Brightcove Learning Services (@bcls1969) on CodePen.

CodePen の使用方法

上記の CodePen を効果的に使用するためのヒントを以下に示します。

Result ボタンをクリックすると、プレーヤーの実際の表示を切り替えることができます。
HTML/CSS/JS ボタンをクリックすると、いずれか 1 つのコードタイプのみを表示できます。
CodePen 内の EDIT ON CODEPEN ボタンをクリックすると、1 つのブラウザー／ブラウザータブでコードを編集できます。

CodePen 上で表示したいコードを調整できます。また、CodePen 内で各コードセクションの幅を変更することも可能です。

要件

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

Brightcove Player v6.51.3 以降

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

プレイリストのエンドスクリーンは、Video Cloud Studio の Players モジュールを使用して実装できます。詳細については、playlist-endscreen プラグインを使用したプレイリストエンドスクリーンの設定ドキュメントを参照してください。

オプション

プラグインの初期化時にオプションオブジェクトを渡すことができます。このオブジェクトには、以下のオプションを指定できます。

playlistId

playlistId

エンドスクリーンに表示するプレイリスト ID を表す文字列です。
型: string
デフォルト: ""
値: "related" - バージョン 1.1.0 以降、Playlist Endscreen プラグインでは特定のプレイリストの代わりに関連動画を表示できます。これは Playback API の /related エンドポイントを使用するため、プレーヤーには検索が有効なポリシーキーが必要です。

title

title

エンドスクリーンのタイトルをカスタマイズするための文字列です。これにより、ボタンのツールチップも変更されます。
型: string
デフォルト: "Related videos"

publishTime

publishTime

公開日を表示するかどうかを指定します。しきい値に応じて、日付形式または 5 days ago のような相対表示になります。
型: boolean
デフォルト: false

以下の例は、2 種類の公開日時表示形式を示しています。

プレイリスト ID の設定

このプラグインでは、プレイリストの ID が必要です。プレイリストは Playback API から取得され、その結果がエンドスクリーンの表示に使用されます。プレイリスト ID は、以下のいずれかの方法で指定します。

インページ埋め込みの属性: data-endscreen-playlist-id="123456789"
iframe 用のクエリ文字列: &endscreenPlaylistId=123456789
プラグインオプション: player.playlistEndscreen({"playlistId": "123456789"})

これは、プレーヤー設定に追加することも、上記の例のように実行時に使用することもできます。
プラグイン初期化後にプログラムで設定: player.playlistEndscreen().setPlaylistId("123456789")

イベント

playlist-endscreen-select イベントは、プレイリストから動画が選択されたときに発火します。以下の例は、その構文を示しています。

myPlayer.on('playlist-endscreen-select', (e, data) => {
          videojs.log('User chose video ${data.to} from video ${data.from}');
        });

変更履歴

v2.02 までの過去のリリースノートおよび変更履歴については、Playlist Endscreen プラグインリリースを参照してください。

v2.02 以降の主な変更点については、Brightcove Player リリースノートに掲載されます。

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

概要

例