サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

    プレイリストUIプラグイン

    このトピックでは、プレイリスト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-playerdata-embed 属性

    data-playerdata-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次のエンドスクリーン が有効になっていると、ビデオが終了するとオーバーレイが非表示になります。 それ以外の場合は、次のビデオまで開いたままになります。
    次のオーバーレイ

    プレイリスト

    • playlist:
      • タイプ: array
      • デフォルト: undefined
      • 最初のプレイリストデータを渡すために使用します。 詳細については、 プレイリストセクション プレイリストAPIガイド」を参照してください。

    playlistPicker

    • playlistPicker:
      • タイプ: boolean
      • デフォルト: true
      • 再生リストに動画のビジュアルリストを含めて、ユーザーがクリックできるようにするかどうかを決定します。 ザ hideOnStarthorizontal オプションは外観と動作を変更します。 いつ playlistPicker is false、他のUI要素は、 nextButton, nextEndscreennextOverlay オプション。

    playOnSelect

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

    繰り返す

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

    showDescription

    • showDescription:
      • タイプ: boolean
      • デフォルト: false
      • 各プレイリストアイテムのビデオの説明を表示します。

    シャッフル

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

    オプションの使用

    オプションを利用できる方法は2つあります。

    1. In Studio's PLAYERS>プラグイン の項目を検索します。
    2. JavaScriptを player.

    使い方 Studio

    In Studio、を選択した場合 player でプレイリストを使用するには player プロパティ' スタイリング セクションでは、UIで上記のオプションのいくつかを設定できます。 次のオプションが Playback プレイリストのセクション players:

    のプレイリストオプション Studio

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

    次のカードを上げる

    プレイリストカードオプション

    次の終了画面を開く

    プレイリストの終了画面オプション

    JavaScriptを使用する

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

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

    変更履歴

    見ます 変更履歴はこちら.


    ページの最終更新日:28年2020月XNUMX日