ガイド:プレイリスト API

概要

API の一部として、次のメソッド、イベント、および設定オプションを使用できます。

例

次の Brightcove Player では、プレイリストが読み込まれ、プレイリスト内で移動できるボタンが使用されています。

次のビデオ

前のビデオ

4番目のビデオにジャンプ

プレイリストアイテムオブジェクト

オートアドバンス () メソッド

player.playlist.autoadvance( )このメソッドはセッターとしてのみ動作し、プレイリストの自動昇格を設定します。有効にすると、動画の最後に指定した秒数待機してから、次の動画に自動的に進みます。正の有限整数でない値は、自動アドバンスをキャンセルしてリセットする要求として扱われます。タイムアウト期間中に自動アドバンス機能を変更すると、自動進撃はキャンセルされ、次の動画には進みませんが、次の動画には新しいタイムアウト値が使用されます。

パラメータ:

• タイムアウト :再生リストに次の動画を読み込む前に遅延する秒単位の整数

戻り値:

このメソッドは値を返しません。

メソッドの使用例を次に示します。

player.playlist.autoadvance(0);次のアイテムを読み込む前に待たない

player.playlist.autoadvance(5);次のアイテムを読み込む前に 5 秒待つ

player.playlist.autoadvance(null);自動進機能をリセットしてキャンセルします

contains () メソッド

player.playlist.contains( item )このメソッドは、itemパラメータにオブジェクトが存在するかどうかプレイリストをチェックします。itemtrueプレイリストに入っているが返された場合、存在しない場合falseが返されます。

パラメータ:

• アイテム :プレイリスト内の video 要素を表す値です。

item パラメーターの有効なフォームは次のとおりです。

• 動画への URL を文字列として指定する

  '//media.w3.org/2010/05/sintel/trailer.mp4'

• ソースと型が定義されたオブジェクトを含む配列

  [{
    src: '//media.w3.org/2010/05/sintel/poster.png',
    type: 'image/png'
  }]

• sources 配列の項目を含むオブジェクト

  {
    sources: [{
      src: '//media.w3.org/2010/05/sintel/trailer.mp4',
      type: 'video/mp4'
    }]
  }   

• Video Cloud では、currentSrc()メソッドをメソッドとともに使用して、現在再生しているビデオが、現在ロードされている再生リストのビデオであることを確認できます。contains()

  myPlayer.playlist.contains(myPlayer.currentSrc());

戻り値:

このメソッドは、ブール型のオブジェクトを返します。

currentIndex（）メソッド

player.playlist.currentIndex( )このメソッドは、プレイリスト内の現在の項目のインデックスを取得します。これは、currentItem()引数なしで呼び出すことと同じです。

パラメータ:

• 該当なし

戻り値:

このメソッドは、number型の値を返します。戻り値は、プレーヤーで現在再生中のビデオの配列位置を表します。プレーヤーが現在プレイリスト以外の動画を再生している場合、currentIndex()は -1 を返します。

currentItem（）メソッド

player.playlist.currentItem(index)このメソッドは、ゲッターとセッターの両方として機能し、プレーヤーで再生しているプレイリストから現在のビデオを取得するか、またはインデックスに基づいて、プレーヤーで再生する新しいビデオを割り当てます。引数なしで呼び出された場合、メソッドは取得を実行し、ゲッターとして機能し、引数を指定すると、値が割り当てられ、セッターとして機能します。

パラメータ (セッター):

• インデックス :プレーヤーに読み込まれる動画の再生リストのゼロベースの配列インデックスを表す数値。

戻り値 (ゲッター):

このメソッドは、数値型の値を返します。戻り値は、プレーヤーで現在再生中のビデオの配列位置を表します。プレーヤーが現在プレイリスト以外の動画を再生している場合、currentItem()は -1 を返します。

特定のビデオにジャンプする関数でのメソッドの使用例は次のとおりです。

function goto2(){
  myPlayer.playlist.currentItem(2);
}

first () メソッド

player.playlist.first()このメソッドは、プレイリストの最初の項目を再生します。プレーヤーで再生されている新しいビデオは、このメソッド呼び出しから返されます。currentItemは、新しいインデックスで更新されます。

パラメータ:

• 該当なし

戻り値:

このメソッドは、オブジェクト型のオブジェクトを返します。手動で作成したプレイリストに対するこのオブジェクトの例を次に示します。

Video Cloud プレイリストのこのオブジェクトの例を次に示します。

関数でメソッドを使用して次のビデオに移動する例を次に示します。

function goToBeginning() {
  var nextVidObject = myPlayer.playlist.first();
}

indexOf () メソッド

ザ・player.playlist.indexOf( item )メソッドは、プレイリストでオブジェクトが存在するかどうかを確認します。itemパラメータであり、見つかった場合は、アイテムのゼロベースのインデックスを返します。メソッドは-1アイテムが見つからない場合。

パラメータ:

• アイテム :プレイリスト内の video 要素を表す値です。

item パラメーターの有効なフォームは次のとおりです。

• 動画への URL を文字列として指定する

  '//media.w3.org/2010/05/sintel/trailer.mp4'

• ソースと型が定義されたオブジェクトを含む配列

  [{
    src: '//media.w3.org/2010/05/sintel/poster.png',
    type: 'image/png'
  }]

• sources 配列の項目を含むオブジェクト

  {
    sources: [{
      src: '//media.w3.org/2010/05/sintel/trailer.mp4',
      type: 'video/mp4'
    }]
  }

• Video Cloud では、currentSrc()メソッドをメソッドと共に使用して、プレイリスト内で現在再生されているビデオの場所を見つけることができます。indexOf()

  myPlayer.playlist.indexOf(myPlayer.currentSrc());

戻り値:

このメソッドは、数値型の値を返します。値は、要素のゼロインデックス位置を表します。オブジェクトが見つからない場合は-1を表します。

last () メソッド

player.playlist.last()このメソッドは、プレイリストの最後の項目を再生します。プレーヤーで再生される新しいビデオは、このメソッド呼び出しから返されます。currentItemは、新しいインデックスで更新されます。

パラメータ:

• 該当なし

戻り値:

このメソッドは、オブジェクト型のオブジェクトを返します。手動で作成したプレイリストに対するこのオブジェクトの例を次に示します。

Video Cloud プレイリストのこのオブジェクトの例を次に示します。

関数でメソッドを使用して次のビデオに移動する例を次に示します。

function goToEnd() {
  var nextVidObject = myPlayer.playlist.last();
}

lastIndex () メソッド

player.playlist.lastIndex( )このメソッドは、プレイリストの最後の項目のインデックスを返します。

パラメータ:

• 該当なし

戻り値:

このメソッドは、数値型の値を返します。戻り値は、再生リストの最後のビデオの配列位置を表します。

next () メソッド

player.playlist.next()このメソッドは、プレイリストの次の項目にプレーヤーを進めます。プレーヤーで再生される新しいビデオは、このメソッド呼び出しから返されます。は新しいインデックスで更新されます。currentItem プレイリストの最後にいる場合は、最後まで進むことができず、何も返されません。

パラメータ:

• 該当なし

戻り値:

このメソッドは、オブジェクト型のオブジェクトを返します。手動で作成したプレイリストに対するこのオブジェクトの例を次に示します。

Video Cloud プレイリストのこのオブジェクトの例を次に示します。

関数でメソッドを使用して次のビデオに移動する例を次に示します。

function nextVideo() {
  var nextVidObject = myPlayer.playlist.next();
}

nextIndex () メソッド

player.playlist.nextIndex( )このメソッドは、プレイリスト内の次の項目のインデックスを返します。

パラメータ:

• 該当なし

戻り値:

このメソッドは、数値型の値を返します。戻り値は、再生リストで再生される次のビデオの配列位置を表します。

プレーヤーが最後のアイテムにいる場合、このメソッドは最後のアイテムのインデックスを返します。ただし、プレイリストが繰り返され、最後の項目にある場合、このメソッドは 0 を返します。プレーヤーが現在プレイリスト以外の動画を再生している場合は -1 を返します。

プレイリスト（）メソッド

player.playlist(newPlayList)このメソッドは、ゲッターとセッターの両方として機能し、プレーヤーで現在再生しているプレイリストを取得するか、再生するプレイヤーにプレイリストを割り当てます。引数なしで呼び出された場合、メソッドは取得を実行し、ゲッターとして機能します。引数を指定すると値が代入され、セッターとして機能します。

パラメータ (セッター):

• 新しいプレイリスト :ビデオソース/オブジェクトの配列。オブジェクトは、手動で作成することも、単に Video Cloud プレイリスト ID または参照 ID を作成することもできます。

playlist()このメソッドをセッターとして使用することもできますが、Brightcove Player のカタログ機能を利用してプレイリストを読み込むのがベストプラクティスです。 myPlayer.catalog.getPlaylist( playlistID )とmyPlayer.catalog.load( playlist )。を参照してくださいプレイヤーカタログ詳細については、ドキュメントを参照してください。

手動で作成されたプレイリストでのメソッドの使用例は次のとおりです。

myPlayer = this;
myPlayer.playlist([{
  "sources": [{
    "src": "//solutions.brightcove.com/bcls/assets/videos/Sea_SeaHorse.mp4", "type": "video/mp4"
  }],
  "name": "Seahorse",
  "thumbnail": "//solutions.brightcove.com/bcls/assets/images/Sea_Seahorse_poster.png",
  "poster": "//solutions.brightcove.com/bcls/assets/images/Sea_Seahorse_poster.png"
}, {
  "sources": [{
    "src": "//solutions.brightcove.com/bcls/assets/videos/Sea_Anemone.mp4", "type": "video/mp4"
  }],
  "name": "Sea Anemone",
  "thumbnail": "//solutions.brightcove.com/bcls/assets/images/Sea_Anemone_poster.png",
  "poster": "//solutions.brightcove.com/bcls/assets/images/Sea_Anemone_poster.png"
}, {
  "sources": [{
    "src": "//solutions.brightcove.com/bcls/assets/videos/Tiger.mp4", "type": "video/mp4"
  }],
  "name": "Tiger",
  "thumbnail": "//solutions.brightcove.com/bcls/assets/images/Tiger_poster.png",
  "poster": "//solutions.brightcove.com/bcls/assets/images/Tiger_poster.png"
}, {
  "sources": [{
    "src": "//solutions.brightcove.com/bcls/assets/videos/Sea_ClownFish.mp4", "type": "video/mp4"
  }],
  "name": "Clownfish",
  "thumbnail": "//solutions.brightcove.com/bcls/assets/images/Sea_ClownFish_poster.png",
  "poster": "//solutions.brightcove.com/bcls/assets/images/Sea_ClownFish_poster.png"
}, {
  "sources": [{
    "src": "//solutions.brightcove.com/bcls/assets/videos/Sea_LionFish.mp4", "type": "video/mp4"
  }],

戻り値 (ゲッター):

このメソッドは、オブジェクトの配列を返します。

返されるVideoCloudプレイリスト（Video Cloudビデオオブジェクトの配列）の例は次のとおりです。

次の例は、カタログオブジェクトの使用方法を示しています。getPlaylist()そしてload() VideoCloudプレイリストをロードする方法。前述のように、Video Cloud プレイリストを使用するときは、この方法が推奨されます。詳細については、 Player カタログのドキュメントを参照してください。

myPlayer = this;
myPlayer.catalog.getPlaylist('1754200320001', function(error, playlist){
  myPlayer.catalog.load(playlist);
  console.log('mediainfo', myPlayer.mediainfo);
)};

console.log('playlist id: ', myPlayer.options()['data-playlist-id']);

前の () メソッド

previous()このメソッドは、プレイリストの前の項目を再生します。プレーヤーで再生される新しいビデオは、このメソッド呼び出しから返されます。は新しいインデックスで更新されます。currentItem プレイリストの先頭にいる場合、開始点を過ぎても続行できず、何も返されません。

パラメータ:

• 該当なし

戻り値:

このメソッドは、オブジェクト型のオブジェクトを返します。手動で作成したプレイリストに対するこのオブジェクトの例を次に示します。

Video Cloud プレイリストのこのオブジェクトの例を次に示します。

前のビデオに移動する関数でのメソッドの使用例は次のとおりです。

function previousVideo() {
  myPlayer.playlist.previous();
}

previusIndex () メソッド

player.playlist.previsousIndex( )このメソッドは、プレーヤーで現在再生中のビデオを続行するビデオのインデックスを返します。

パラメータ:

• 該当なし

戻り値:

このメソッドは、数値型の値を返します。戻り値は、プレーヤーで現在再生されているビデオの進行中のビデオの配列位置を表します。

プレイヤーが最初のアイテムに乗っている場合、このメソッドは 0 を返します。ただし、プレイリストが繰り返されて最初のアイテムにある場合は、最後のアイテムのインデックスを返します。プレーヤーが現在プレイリスト以外の動画を再生している場合は -1 を返します。

repeat（）メソッド

playlist.repeat()方法を使用すると、プレイリストの最後のビデオが終了した後、再生リストを繰り返すことができます。この機能は、プレイリストの最後のビデオが終了すると、プレイリストの最初のビデオを再生します。

パラメータ:

• プレイリストが繰り返されるべきかどうかを示すブール値。デフォルトはfalse

戻り値:

現在の値playlist.repeat

このメソッドは、truefalse引数としてまたはを渡すことによって値を設定します。引数を使用しない場合、このメソッドは現在の値を返します。次のコードは、実装を示しています。

• 1 ～ 11 行目:を除く標準のプレイリストプレーヤーコードidの値が追加されますmyPlayerID。
• 16行目です:再生リストを繰り返し設定します。
• 17行目:アクション中のメソッドをゲッターとして表示します。コンソールにの値が表示されますrepeat。

<video-js id="myPlayerID"
    data-playlist-id="5455901760001"
    data-account="1507807800001"
    data-player="SyMOsyA-W"
    data-embed="default"
    data-application-id
    class="video-js"
    controls></video-js>
  <script src="https://players.brightcove.net/1507807800001/SyMOsyA-W_default/index.min.js"></script>

  <div class="vjs-playlist"></div>

<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.playlist.repeat(true);
    console.log('myPlayer.repeat()',myPlayer.playlist.repeat());
  });
</script>

reverse () メソッド

player.playlist.reverse( )この方法は、最初のビデオが最後になり、最後のビデオが最初になるように、再生リストのビデオの順序を変更します。

パラメータ:

• 該当なし

戻り値:

メソッドは値を返しません。

再生リストのビデオの順序を逆にします。たとえば、最初のビデオが最後になり、最後のビデオが最初のビデオになります。

このメソッドは、playlistsorted反転後にイベントをディスパッチします。

シャッフル () メソッド

player.playlist.shuffle( )この方法は、再生リスト項目の順序をシャッフル/ランダム化します。

パラメータ:

• restオプションオプション:デフォルトでは、プレイリスト全体がランダム化されます。ただし、ユーザーがすでにビデオを視聴している場合など、すべての場合において、これは望ましいとは限りません。このオプションにを渡すと、現在のアイテムの後にプレイリストアイテムのみがシャッフルされます。true たとえば、最初の項目では、メソッドは 2 番目の項目以降のみをシャッフルします。パラメータを使用する構文は次のとおりです。

  player.playlist.shuffle({rest: true});

戻り値:

メソッドは値を返しません。

このメソッドは、フィッシャーイェーツシャッフルアルゴリズムを使用してプレイリストのアイテムをシャッフルします。

このメソッドは、playlistsortedシャッフル後にイベントを送出します。

プレーヤーが最初にロードされたときにプレイリストをシャッフルする場合は、 このメソッドをイベントのイベントハンドラで使用する必要があります。playlistsorted これにより、メソッドがプレイリストをプレーヤーにロードする前にシャッフルしようとする条件を回避します。構文の例は次のとおりです。

myPlayer.on("duringplaylistchange", function() {
  myPlayer.playlist.shuffle();
});

sort () メソッド

player.playlist.sort( )この方法は、 JavaScriptのarray.prototype.sort () メソッドと同じ方法で再生リストのビデオをソートします。

パラメータ:

• 関数を比較する :ビデオのソート方法を定義する関数。

戻り値:

メソッドは値を返しません。

durationビデオをソートするメソッドの使用例を次に示します。

videojs.getPlayer('myPlayerID').ready(function() {
  var myPlayer = this;
  myPlayer.on('loadedmetadata', function(){
    myPlayer.playlist.sort(function(a, b) {
      return a.duration - b.duration;
    });
  });
});

このメソッドは、playlistsorted反転後にイベントを送出します。

beforeplaylistitem イベント

beforeplaylistitemイベントは、プレイリスト内の新しいコンテンツソースに切り替える前に送出されます (つまりcurrentItem()、first()などが呼び出されます）が、プレイヤーの状態が変更される前です。

duringplaylistChange イベント

duringplaylistchangeイベントは、呼び出し時にプレイリストのコンテンツが変更された後playlist()、現在のプレイリスト項目が変更される前に送出されます。イベントオブジェクトには、いくつかの特別なプロパティがあります。

• nextIndex :最初に再生される次の再生リストのインデックスです。
• nextPlaylist :次のプレイリストの浅いクローン。
• previousIndex :前のプレイリストのインデックス (このイベントがトリガーされたときに常に現在のインデックスと一致しますが、完全性のために提供されます)。
• previousPlaylist :前のプレイリストの浅いクローン。

注意事項

このイベントの起動中、プレイリストは変化状態であるとみなされ、次のような効果があります。

• player.playlist([...])メインプレイリストメソッドを呼び出すと、エラーがスローされます。
• プレイリストのナビゲーション方法、first、last、next、previousは、動作不能にレンダリングされます。
• currentItem()このメソッドはゲッターとしてのみ動作します。
• 並べ替え方法ながら、sort、reverseそしてshuffle、動作し続けます、彼らは派遣しませんplaylistsortedイベント。
•  

このイベントを使用する理由

このイベントは、プレイリストの設定プロセスをインターセプトする機会を提供し、playlistchange新しいソースがプレーヤーに設定される前とイベントが発生する前に、一貫性のあるプレイリスト API を提供します。ユースケースの 1 つは、サーバーから取得したプレイリストをシャッフルしますが、その最初のソースがプレーヤーにロードされるか、プレイリスト UI が更新される前に、

player.on('duringplaylistchange', function() {
  // Remember, this will not trigger a "playlistsorted" event!
  player.playlist.shuffle();
});

player.on('playlistchange', function() {
  videojs.log('The playlist was shuffled, so the UI can be updated.');
});

プレイリスト変更イベント

playlistchangeこのイベントは、プレイリストが変更されるたびに非同期的に送出されます。このイベントが送出されると、プレーヤーは新しいプレイリストの最初のビデオの読み込みを開始します。これは、ブラウザが新しいプレイリストの最初のビデオのロードを開始できるようにするために非同期的に起動されます。

プレイリストアイベント

playlistitemこのイベントは、プレイリスト内の新しいコンテンツソースに切り替えたときに送出されます (つまりcurrentItem()、first()などが呼び出されます) は、プレイヤーの状態が変更された後、再生が再開される前に呼び出されます。

プレイリストソートイベント

playlistsortedこのイベントは、プレイリスト項目の順序を変更するメソッドが呼び出されると、送出されますsort()。reverse()またはshuffle()。

PlayonSelect

この値は、trueに設定した場合、プレイヤ内の現在のビデオが以前に一時停止されていた場合でも、再生リストからクリックしたビデオの再生を開始するための設定オプションです。デフォルトでは、プレイリストから新しい動画をクリックすると、新しい動画が読み込まれますが、あらかじめ一時停止していた場合は、プレーヤーは一時停止したままになります。

この値を操作する方法については、 Player 設定ガイド-プレイリストのセクションを参照してください。

ビジュアルプレイリスト

ページにプレイリストを視覚的に表現したい場合は、そうするようにプレーヤーを構成する必要があります。次に示すように、Studio を使用して、 PLAYers > Stylingセクションで設定を更新できます（垂直または水平プレイリストを選択できます）。

必要に応じて、Player Management APIを使用して、プレイリスト用にプレーヤーを構成することもできます。を参照してくださいプレイリストのセクションプレーヤー構成ガイド完全な情報については。

プレイリストが有効になっているかどうかをプログラムで確認するには、player.playlistUiが定義されています。

console.log('myPlayer.playlistUi:', myPlayer.playlistUi);