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

nextOverlay

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