概要
プレイリスト UI プラグインには、プレイリストの動作をカスタマイズするためのオプションが含まれています。多数のオプションは、プレイリストへのレイアウト、動作、実装戦略などの変更を提供します。次の例は、プレイリストの 2 つの基本レイアウト (垂直方向と横方向) を示しています。例ごとに、カスタマイズできるものを紹介するための動作の小さなセットがリストされています。
縦型レイアウト
以下のプレイリストの例は、以下の例を示しています。
- プレーヤーの右側にある垂直再生リストには表示/非表示ボタンがあり、プレイリストのサイズと位置が自動的に調整されます。これは、標準(iframe)プレーヤー実装を使用する場合のデフォルトの動作です。
- プレイリストは最初に表示されます。
hideOnStart
このオプションはオプションを使用して変更できます。 -
ビデオの最後付近に、次のビデオまでの時間と次のビデオのサムネイルを表示するオーバーレイが表示されます。これはデフォルトの動作であり、
nextOverlay
オプションで制御されます。
水平レイアウト
以下のプレイリストの例は、次のとおりです。
- ビデオの下に位置する水平再生リスト。
-
上記の例のように、オーバーレイはビデオの最後近くに表示されるだけでなく、次のビデオの再生を開始するまでの時間を、エンドスクリーンに表示します。これは、
autoadvance
このオプションがゼロ以外で、ビデオ間の一時停止のためにエンドスクリーンが表示されるためです。エンドスクリーンは、nextEndscreen
オプションを使用して変更できます。
プレイヤー/プレイリストの関連付け
デフォルトでは、プレイリスト UI プラグインは、特定のプレーヤーの正しいプレイリストコンテナ要素の検索を処理します。これは、.vjs-playlist
DOM内の最初の空の要素を見つけ、それを使用することを意味します。ただし、プラグインでは、複数のプレーヤーで複雑なワークフローを構築するときに、プレーヤーとプレイリストコンテナ間でより明示的な関連付けを行うことができます。
data-for
属性
data-for
属性をプレイリストコンテナに適用してid
、それをプレーヤーのに関連付けることができます。次に例を示します。
<video-js id="myPlayerID"
...></video-js>
<div class="vjs-playlist" data-for="myPlayerID"></div>
これは、明示的な関連付けの最も具体的な方法です。これは、他の方法よりも優先されます。
data-player
data-embed
属性と
data-player
data-embed
アトリビュートとアトリビュートをプレイリストコンテナに適用して、Brightcove Player に関連付けることができます。アソシエイトが正しく機能するためには、両方の属性を使用する必要があります。次の例では、特定の関連付けが行われると、2 <div>
番目のタグのみがプレイヤーのプレイリストを保持します。<div>
最初の空になります。
<video-js data-playlist-id="5455901760001"
data-account="1507807800001"
data-player="SJLNAJye7"
data-embed="default"...></video-js>
<script src="https://players.brightcove.net/1507807800001/SJLNAJye7_default/index.min.js"></script>
<div class="vjs-playlist"></div>
<div class="vjs-playlist" data-player="SJLNAJye7" data-embed="default"></div>
オプション
初期化時に options オブジェクトをプラグインに渡すことができます。このオブジェクトには、次のいずれかのオプションを含めることができます。
オートアドバンス
-
autoadvance
:- タイプ:
number
- デフォルト:
undefined
- 再生リストのビデオ間で一時停止が発生するかどうか、およびどのくらいの期間を決定します。詳細については、プレイリスト API ガイドの「自動進め」セクションを参照してください。
- タイプ:
HideonStart
-
hideOnStart
:- タイプ:
boolean
- デフォルト:
false
- プレイリストを最初に非表示にするかどうかを決定します。これは、 iframe プレーヤーの実装を使用する場合にのみ機能します。プレイリストの表示/非表示機能は iframe でのみ利用できるため、論理的です。このオプションは、水平再生リストでは機能しません。
-
要件/依存関係:
playlistPicker
:true
- iframe 埋め込み
horizontal
:false
- タイプ:
水平
-
horizontal
:- タイプ:
boolean
- デフォルト:
false
- プレイリストを、垂直方向ではなく水平方向にプレーヤの下に表示します。
-
要件/依存関係:
playlistPicker
:true
- タイプ:
NextButton
-
nextButton
:- タイプ:
boolean
- デフォルト:
true
-
場合は
true
、次のプレイリスト項目に移動するためのボタンが追加されます。ボタンを無効にするには、オプションをに設定しますfalse
。ボタンは、再生ボタンの右側のコントロールバーに追加されます。
- タイプ:
nextEndscreen
nextEndscreen
:- タイプ:
boolean
- デフォルト:
true
-
の場合
true
、プレーヤーは再生後にプレーヤーの上にモーダルエンドスクリーンを表示します。オプションをに設定することで、エンドスクリーンを無効にすることができますfalse
。この終了画面では、プレイリストの今後の動画がプレビューされます。オプションのモードの詳細は次のとおりです。-
autoadvance
オプションは 0 より大きい値に設定する必要があります (設定しないと、エンドスクリーンを表示する時間がないため、スキップされます)。 - 表示されたカウントダウンは、
autoadvance
トリガーまでの残り時間を表します。 - プレーヤーには、カスタムエンドスクリーンプラグインの実装や、ビデオの後に表示するように構成されたソーシャルプラグインを含めることはできません。いずれかの状態が検出された場合、終了画面は表示されません。
-
nextOverlay
-
nextOverlay
:- タイプ:
boolean
- デフォルト:
true
-
の場合
true
、プレーヤーはプレーヤーの右下隅に小さなオーバーレイを表示します。オプションをに設定することで、オーバーレイを無効にすることができますfalse
。このオーバーレイは、再生リストの今後のビデオをプレビューします。オプションに関するモードの詳細は次のとおりです。- 後続のプレイリスト項目が必要です。
autoadvance
オプションは 0 以上に設定する必要があります。- カウントダウンは、
autoadvance
動画の残り時間と待機時間を表します。 - オーバーレイは、ビデオの終わりから10秒後に表示されます。ただし、動画の長さが 30 秒未満の場合は、再生時間の 2/3 ポイントに表示されます。
- オーバーレイがユーザによって却下された場合、ソースが変更されるまで却下されたままになります。新しいソースでは再び表示されます。
- Up Next エンドスクリーンが有効になっている場合、ビデオが終了するとオーバーレイは非表示になります。それ以外の場合は、次のビデオまで開いたままになります。
- タイプ:
プレイリスト
-
playlist
:- タイプ:
array
- デフォルト:
undefined
- 最初のプレイリストデータを渡すために使用されます。詳細については、プレイリスト API ガイドの「プレイリスト」セクションを参照してください。
- タイプ:
PlayListPicker
-
playlistPicker
:- タイプ:
boolean
- デフォルト:
true
-
ユーザーがビデオをクリックできるように、再生リストにビデオの視覚的なリストを含めるかどうかを指定します。
hideOnStart
horizontal
オプションとオプションは、その外観と動作を変更します。playlistPicker
がいつでもfalse
、他の UI 要素は引き続きnextButton
、nextEndscreen
nextOverlay
およびオプション。
- タイプ:
PlayOnSelect
-
playOnSelect
:- タイプ:
boolean
- デフォルト:
false
-
playOnSelect
このオプションは、ユーザーがプレイリストのビデオをクリックしたときにビデオの再生を開始するかどうかを制御するために使用されます。オプションがに設定されている場合true
、再生リストから新しいビデオを選択すると、そのプレーヤーが以前に一時停止していた場合でも、そのビデオの再生が開始されます。デフォルトでは、プレイリストから新しいビデオをクリックすると、新しいビデオが読み込まれますが、事前に一時停止していた場合はプレーヤーは一時停止したままになります。 -
要件/依存関係:
playlistPicker
:true
- タイプ:
繰り返す
-
repeat
:- タイプ:
boolean
- デフォルト:
false
- 再生リストの最後のビデオが終了した後、再生リストを繰り返します。この機能は、プレイリストの最後のビデオが終了すると、プレイリストの最初のビデオを再生します。
- タイプ:
表示説明
-
showDescription
:- タイプ:
boolean
- デフォルト:
false
- プレイリスト項目ごとに動画の説明を表示します。
- タイプ:
シャッフル
-
shuffle
:- タイプ:
boolean
- デフォルト:
false
- 新しいデータがロードされるたびに、プレイリストアイテムをシャッフルします。
- タイプ:
オプションの使用
オプションを利用するには、次の 2 つの方法があります。
- Studio の「プレーヤー」>「プラグイン」セクションにあります。
- プレイヤーで JavaScript を使用する。
スタジオを使う
Studio で、プレーヤープロパティの [' スタイリング]セクションでプレイリストを使用するようにプレーヤーを選択した場合は、UI で上記のオプションの一部を設定できます。次のオプションはで利用可能です再生プレイリストプレーヤーのセクション:
選択した場合連続再生モードあなたは選ぶことができますビデオカウントダウンオプション。選択肢の視覚的な表現を次に示します。
次のカードまで
次のエンドスクリーンまで
JavaScriptを使う
コードでオプションを実装するには、オブジェクトを作成し、必要なオプションをそれぞれの値を割り当てて、プラグインを呼び出すときにオプションオブジェクトを渡します。
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this,
options = {};
options.horizontal = true;
options.nextButton = false;
myPlayer.bcPlaylistUi(options);
更新履歴
プレイリスト UI プラグインのリリースノートを参照してください。
過去のリリースノートについては、ここの changelog を参照してください。