サポートに連絡する| システムステータス
ページコンテンツ

    プレイリスト UI

    プラグインこのトピックでは、プレイリスト UI プラグインを使用して、デフォルトのプレイリスト機能のルックアンドフィールを向上させる方法を学習します。

    概要

    プレイリスト 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-playerdata-embed属性と

    data-playerdata-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。ボタンは、再生ボタンの右側のコントロールバーに追加されます。
    next button

    nextEndscreen

    • nextEndscreen :
    • タイプ: boolean
    • デフォルト: true
    • の場合true、プレーヤーは再生後にプレーヤーの上にモーダルエンドスクリーンを表示します。オプションをに設定することで、エンドスクリーンを無効にすることができますfalse。この終了画面では、プレイリストの今後の動画がプレビューされます。オプションのモードの詳細は次のとおりです。
      • autoadvanceオプションは 0 より大きい値に設定する必要があります (設定しないと、エンドスクリーンを表示する時間がないため、スキップされます)。
      • 表示されたカウントダウンは、autoadvanceトリガーまでの残り時間を表します。
      • プレーヤーには、カスタムエンドスクリーンプラグインの実装や、ビデオの後に表示するように構成されたソーシャルプラグインを含めることはできません。いずれかの状態が検出された場合、終了画面は表示されません。
    next endscreen

    nextOverlay

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

    プレイリスト

    PlayListPicker

    • playlistPicker :
      • タイプ: boolean
      • デフォルト: true
      • ユーザーがビデオをクリックできるように、再生リストにビデオの視覚的なリストを含めるかどうかを指定します。hideOnStarthorizontalオプションとオプションは、その外観と動作を変更します。playlistPickerがいつでもfalse、他の UI 要素は引き続きnextButton、nextEndscreennextOverlayおよびオプション。

    PlayOnSelect

    • playOnSelect :
      • タイプ: boolean
      • デフォルト: false
      • playOnSelectこのオプションは、ユーザーがプレイリストのビデオをクリックしたときにビデオの再生を開始するかどうかを制御するために使用されます。オプションがに設定されている場合true、再生リストから新しいビデオを選択すると、そのプレーヤーが以前に一時停止していた場合でも、そのビデオの再生が開始されます。デフォルトでは、プレイリストから新しいビデオをクリックすると、新しいビデオが読み込まれますが、事前に一時停止していた場合はプレーヤーは一時停止したままになります。
      • 要件/依存関係:
        • playlistPicker : true

    繰り返す

    • repeat :
      • タイプ: boolean
      • デフォルト: false
      • 再生リストの最後のビデオが終了した後、再生リストを繰り返します。この機能は、プレイリストの最後のビデオが終了すると、プレイリストの最初のビデオを再生します。

    表示説明

    • showDescription :
      • タイプ: boolean
      • デフォルト: false
      • プレイリスト項目ごとに動画の説明を表示します。

    シャッフル

    • shuffle :
      • タイプ: boolean
      • デフォルト: false
      • 新しいデータがロードされるたびに、プレイリストアイテムをシャッフルします。

    オプションの使用

    オプションを利用するには、次の 2 つの方法があります。

    1. Studio の「プレーヤー」>「プラグイン」セクションにあります。
    2. プレイヤーで JavaScript を使用する。

    スタジオを使う

    Studio で、プレーヤープロパティの [' スタイリング]セクションでプレイリストを使用するようにプレーヤーを選択した場合は、UI で上記のオプションの一部を設定できます。次のオプションはで利用可能です再生プレイリストプレーヤーのセクション：

    Playlist options in Studio

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

    次のカードまで

    Playlist card option

    次のエンドスクリーンまで

    Playlist endscreen option

    JavaScriptを使う

    コードでオプションを実装するには、オブジェクトを作成し、必要なオプションをそれぞれの値を割り当てて、プラグインを呼び出すときにオプションオブジェクトを渡します。 

    videojs.getPlayer('myPlayerID').ready(function() {
 var myPlayer = this,
   options = {};
  options.horizontal = true;
  options.nextButton = false;
  myPlayer.bcPlaylistUi(options);

    更新履歴

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

    過去のリリースノートについては、ここの changelog を参照してください。

    ページの最終更新日30 Sep 2021