プレイリストUIプラグイン
概要
プレイリストUIプラグインには、プレイリストの動作をカスタマイズするために使用できるオプションが含まれています。 多数のオプションにより、レイアウト、動作、実装戦略など、プレイリストが変更されます。 次の例は、プレイリストのXNUMXつの基本的なレイアウト、垂直と水平を示しています。 例ごとに、カスタマイズできるものの概要として、動作の小さなセットがリストされています。
垂直レイアウト
このプレイリストの例を以下に示します。
- の右側にある垂直プレイリスト player 表示/非表示ボタンがあり、プレイリストは自動的にサイズと位置が調整されます。 これは、 標準(iframe) player インプリメンテーション。
- プレイリストが最初に表示されます。 これは、
hideOnStart
オプションを選択します。 -
ビデオの終わり近くに、次のビデオまでの時間と次のビデオのサムネイルを表示するオーバーレイが表示されます。 これはデフォルトの動作であり、
nextOverlay
オプションを選択します。
水平レイアウト
このプレイリストの例を以下に示します。
- 動画の下にある水平再生リスト。
-
上記の例のように、ビデオの終わり近くにオーバーレイが表示されるだけでなく、終了画面には次のビデオの再生が始まるまでの時間が表示されます。 これは
autoadvance
オプションはゼロ以外であり、ビデオ間の一時停止の終了画面が表示されます。 終了画面は、nextEndscreen
オプションを選択します。
Player/プレイリストの関連付け
デフォルトでは、プレイリストUIプラグインは、所定のプレイリストコンテナ要素の検索を処理します player。 これは、最初の空を見つけることを意味します
.vjs-playlist
DOMの要素を使用します。 ただし、プラグインは、より明確な関連付けを提供し、 player プレイリストコンテナは、複数の players.
data-for
属性を使用する。
data-for
属性をプレイリストコンテナに適用して、 player's
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。 アソシエイトが正しく機能するには、両方の属性を使用する必要があることに注意してください。 次の例では、XNUMX番目の <div>
タグは、プレイリストを保持します player 特定の関連付けが行われるとき。 最初
<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>
オプション
初期化時にオプションオブジェクトをプラグインに渡すことができます。 このオブジェクトには、次のいずれかのオプションが含まれます。
オートアドバンス
-
autoadvance
:- タイプ:
number
- デフォルト:
undefined
- 再生リスト内の動画の間に一時停止が発生するかどうか、またその期間を決定します。 詳細については、 自動更新セクション プレイリストAPIガイド」を参照してください。
- タイプ:
hideOnStart
-
hideOnStart
:- タイプ:
boolean
- デフォルト:
false
- プレイリストが初期状態で非表示になっているかどうかを判定します。 これは、 IFRAME player 実装。プレイリストの表示/非表示機能はiframeでのみ使用できるため、論理的です。 このオプションは、水平プレイリストでは機能しません。
-
要件/依存関係:
playlistPicker
:true
- iframe埋め込み
horizontal
:false
- タイプ:
水平な
-
horizontal
:- タイプ:
boolean
- デフォルト:
false
- プレイリストを下に水平に表示します player 垂直ではなく。
-
要件/依存関係:
playlistPicker
:true
- タイプ:
nextButton
-
nextButton
:- タイプ:
boolean
- デフォルト:
true
-
If
true
、次のプレイリスト項目に移動するためのボタンが追加されます。 ボタンを無効にするには、オプションをfalse
。 ボタンは、再生ボタンの右側にあるコントロールバーに追加されます。
- タイプ:

次の終了画面
nextEndscreen
:- タイプ:
boolean
- デフォルト:
true
-
If
true
player の上にモーダル終了画面を表示します player 再生後。 オプションを次のように設定すると、終了画面を無効にできますfalse
。 この終了画面は、プレイリストの今後のビデオをプレビューします。 オプションのモードの詳細は次のとおりです。-
autoadvance
オプションはゼロより大きい値に設定する必要があります(そうしないと、終了画面を表示する時間がなく、スキップされます)。 - 表示されたカウントダウンは、
autoadvance
引き金。 - player しなければなりません Studio上ではサポートされていません。 動画の後に表示するように構成されたカスタム終了画面プラグインまたはソーシャルプラグインの実装を含めます。 どちらかの状態が検出された場合、終了画面は表示されません。
-

nextOverlay
-
nextOverlay
:- タイプ:
boolean
- デフォルト:
true
-
If
true
player の右下隅に小さなオーバーレイが表示されます player。 オーバーレイを無効にするには、オプションをfalse
。 このオーバーレイは、再生リストで次のビデオをプレビューします。 オプションのモードの詳細は次のとおりです。- 後続のプレイリスト項目が必要です。
-
autoadvance
オプションはゼロ以上に設定する必要があります。 - カウントダウンは、動画に残っている時間に
autoadvance
待ち時間。 - オーバーレイは、ビデオの最後から10秒後に表示されます。 ただし、ビデオの長さが30秒未満の場合は、デュレーションの2/3のポイントに表示されます。
- オーバレイがユーザによって却下された場合、ソースが変更されるまで、オーバレイは解除されたままである。 新しい情報源のために再表示されます。
- もし Up次のエンドスクリーン が有効になっていると、ビデオが終了するとオーバーレイが非表示になります。 それ以外の場合は、次のビデオまで開いたままになります。
- タイプ:

プレイリスト
-
playlist
:- タイプ:
array
- デフォルト:
undefined
- 最初のプレイリストデータを渡すために使用します。 詳細については、 プレイリストセクション プレイリストAPIガイド」を参照してください。
- タイプ:
playlistPicker
-
playlistPicker
:- タイプ:
boolean
- デフォルト:
true
-
再生リストに動画のビジュアルリストを含めて、ユーザーがクリックできるようにするかどうかを決定します。 ザ
hideOnStart
およびhorizontal
オプションは外観と動作を変更します。 いつplaylistPicker
isfalse
、他のUI要素は、nextButton
,nextEndscreen
およびnextOverlay
オプション。
- タイプ:
playOnSelect
-
playOnSelect
:- タイプ:
boolean
- デフォルト:
false
-
playOnSelect
オプションは、ユーザーが再生リストの動画をクリックしたときに動画の再生を開始するかどうかを制御するために使用されます。 オプションがに設定されている場合true
、プレイリストから新しい動画を選択すると、その動画の再生が開始されます。 player 以前に一時停止されました。 デフォルトでは、プレイリストから新しい動画をクリックすると、新しい動画が読み込まれますが、 player 事前に一時停止されていた場合は一時停止されます。 -
要件/依存関係:
playlistPicker
:true
- タイプ:
繰り返す
-
repeat
:- タイプ:
boolean
- デフォルト:
false
- プレイリストの最後の動画が終了した後、プレイリストを繰り返します。 この機能は、プレイリストの最後のビデオが終了すると、プレイリストの最初のビデオを再生します。
- タイプ:
showDescription
-
showDescription
:- タイプ:
boolean
- デフォルト:
false
- 各プレイリストアイテムのビデオの説明を表示します。
- タイプ:
シャッフル
-
shuffle
:- タイプ:
boolean
- デフォルト:
false
- 新しいデータが読み込まれるたびに、プレイリストアイテムをシャッフルします。
- タイプ:
オプションの使用
オプションを利用できる方法は2つあります。
- In Studio's PLAYERS>プラグイン の項目を検索します。
- JavaScriptを player.
使い方 Studio
In Studio、を選択した場合 player でプレイリストを使用するには player プロパティ' スタイリング セクションでは、UIで上記のオプションのいくつかを設定できます。 次のオプションが Playback プレイリストのセクション players:

選択した場合 連続再生モード あなたは ビデオカウントダウン オプション。 選択肢の視覚的表現を次に示します。
次のカードを上げる

次の終了画面を開く

JavaScriptを使用する
コードでオプションを実装するには、オブジェクトを作成し、必要なオプションにそれぞれの値を割り当て、プラグインを呼び出すときにオプションオブジェクトを渡します。
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this,
options = {};
options.horizontal = true;
options.nextButton = false;
myPlayer.bcPlaylistUi(options);
変更履歴
見ます 変更履歴はこちら.