ガイド：プレイリストAPI

概要

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

例

以下 Brightcove Player プレイリストがロードされ、プレイリスト内を移動できるボタンを使用します。

次のビデオ

前のビデオ

4thに移動ビデオ

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

autoadvance（）メソッド

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

パラメータ：

• タイムアウト：再生リストの次の動画を読み込むまでの遅延時間（秒単位）

戻り値：

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

このメソッドの使用例は次のとおりです。

player.playlist.autoadvance(0); 次のアイテムをロードする前に待つことはありません

player.playlist.autoadvance(5); 次の項目をロードする前に5秒待ちます。

player.playlist.autoadvance(null); 自動進行をリセットおよびキャンセルします

contains（）メソッド

　 player.playlist.contains( item ) メソッドは、プレイリスト内のオブジェクトの存在をプレイリストでチェックします。 item パラメータ。 もし item プレイリストに入っています true 存在しなければ返される false 返されます。

パラメーター：

• 項目：プレイリスト内の動画要素を表す値。

itemパラメータの有効な書式は次のとおりです。

• 文字列としてのビデオへのURL

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

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

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

• ソース配列の項目を含むオブジェクト

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

• In Video Cloud、あなたは currentSrc() メソッドと contains() 現在再生中のビデオが現在ロードされているプレイリストからのものであることを確認します。

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

戻り値：

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

currentIndex（）メソッド

　 player.playlist.currentIndex( ) メソッドは、プレイリスト内の現在のアイテムのインデックスを取得します。 これは、 currentItem() 引数なし。

パラメータ：

• なし

戻り値：

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

currentItem（）メソッド

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

パラメータ（セッタ）：

• index：にロードされるビデオの再生リストからのゼロベースの配列インデックスを表す数値 player.

戻り値（ゲッタ）：

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

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

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

first（）メソッド

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

パラメーター：

• なし

戻り値：

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

このオブジェクトの例 Video Cloud プレイリストは次のとおりです：

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

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

indexOf（）メソッド

　 player.playlist.indexOf( item ) メソッドは、プレイリスト内のオブジェクトの存在を確認します。 item パラメータを返します。見つかった場合は、アイテムの0から始まるインデックスを返します。 このメソッドは -1 項目が見つからない場合。

パラメーター：

• 項目：プレイリスト内の動画要素を表す値。

itemパラメータの有効な書式は次のとおりです。

• 文字列としてのビデオへのURL

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

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

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

• ソース配列の項目を含むオブジェクト

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

• In Video Cloud あなたが使用することができます currentSrc() メソッドと indexOf() メソッドを使用して、プレイリスト内の現在再生中のビデオの場所を探します。

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

戻り値：

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

last（）メソッド

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

パラメーター：

• なし

戻り値：

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

このオブジェクトの例 Video Cloud プレイリストは次のとおりです：

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

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

lastIndex（）メソッド

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

パラメータ：

• なし

戻り値：

このメソッドは、型の値を返します。 数。 返される値は、プレイリスト内の最後のビデオの配列位置を表します。

next（）メソッド

　 player.playlist.next() メソッドは、 player プレイリストの次のアイテムに移動します。 で再生される新しいビデオ player このメソッド呼び出しから返されます。 の currentItem 新しいインデックスで更新されます。 プレイリストの最後にいる場合は、最後を過ぎることはできず、何も返されません。

パラメーター：

• なし

戻り値：

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

このオブジェクトの例 Video Cloud プレイリストは次のとおりです：

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

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

nextIndex（）メソッド

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

パラメータ：

• なし

戻り値：

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

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

playlist（）メソッド

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

パラメータ（セッタ）：

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

あなたは playlist() メソッドをセッターとして使用する場合は、 Brightcove Playerのプレイリストを読み込むためのカタログ機能 myPlayer.catalog.getPlaylist( playlistID ) 更に myPlayer.catalog.load( playlist )。 見る Player カタログ 詳細はドキュメント。

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

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"
  }],

戻り値（ゲッタ）：

このメソッドは、 オブジェクトの配列.

戻り値の例 Video Cloud プレイリスト（ Video Cloud ビデオオブジェクト）

次の例は、カタログオブジェクトの getPlaylist() 更に load() ロードするメソッド Video Cloud プレイリスト。 前述のように、これは、 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（）メソッド

　 previous() メソッドは、プレイリストの前のアイテムを再生します。 で再生される新しいビデオ player このメソッド呼び出しから返されます。 の currentItem 新しいインデックスで更新されます。 あなたがプレイリストの先頭にいる場合は、最初からやり直すことはできず、何も返されません。

パラメーター：

• なし

戻り値：

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

このオブジェクトの例 Video Cloud プレイリストは次のとおりです：

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

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

previousIndex（）メソッド

　 player.playlist.previsousIndex( ) メソッドは、現在再生中の動画の前にある動画のインデックスを返します player.

パラメータ：

• なし

戻り値：

このメソッドは、型の値を返します。 数。 戻り値は、現在再生中のビデオの前にあるビデオの配列位置を表します player.

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

repeat（）メソッド

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

パラメーター：

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

戻り値：

の現在の値 playlist.repeat

このメソッドは、次のいずれかを渡して値を設定します。 true or false 議論として。 引数を使用しない場合、メソッドは現在の値を返します。 次のコードは実装を示しています：

• 1〜11行目：標準プレイリスト player 以外のコード id の値が加算されます myPlayerID.
• Line 16：プレイリストを繰り返すように設定します。
• Line 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});

戻り値：

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

このメソッドは、プレイリスト内のアイテムを Fisher-Yatesシャッフルアルゴリズム.

このメソッドは、 playlistsorted シャッフル後のイベント。

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

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

sort（）メソッド

　 player.playlist.sort( ) メソッドは、JavaScriptと同じ方法でプレイリスト内のビデオをソートします。 Array.prototype.sort（） 方法。

パラメータ：

• compareFunction：ビデオのソート方法を定義する関数。

戻り値：

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

この方法を使ってビデオを並べ替える例 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()などが呼び出されます）が、 playerの状態が変更されました。

duringplaylistchangeイベント

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

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

注意事項

このイベントの発生中、プレイリストは変化する状態にあると考えられ、次のような影響があります。

• メインプレイリストメソッドを呼び出すと、 player.playlist([...]) エラーが発生します。
• プレイリストナビゲーションメソッド、 first, last, next 更に previous動作不能にされる。
• 　 currentItem() メソッドはゲッターとしてのみ機能します。
• ソート方法、 sort, reverse 更に shuffle、仕事を続けるだろう、彼らは playlistsorted イベント。
•  

なぜこのイベントを使うのですか？

このイベントは、新しいソースがに設定される前に、プレイリスト設定プロセスをインターセプトする機会を提供します player と前に playlistchange 一貫したプレイリストAPIを提供しながら、イベントが発生します。 XNUMXつのユースケースは、サーバーから来たばかりのプレイリストをシャッフルする場合がありますが、最初のソースが player または、プレイリストの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 イベントは、プレイリストが変更されるたびに非同期で送出されます。 このイベントが送出されると、 player 新しい再生リストの最初の動画の読み込みを開始します。 新しいプレイリストの最初の動画の読み込みをブラウザに開始させるために、非同期で発生します。

プレイリストアイテムイベント

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

再生リストイベント

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

playOnSelect

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

この値を操作するための情報は、 Player 構成ガイド-プレイリストセクション.

ビジュアルプレイリスト

ページに再生リストを視覚的に表示したい場合は、 player そうするには。 を使用して設定を更新できます Studio、で PLAYERS>スタイリング セクションに移動します（垂直再生リストまたは水平再生リストのいずれかを選択できます）。

ご希望の場合は、 Player Management API あなたを設定する player プレイリスト用。 を参照してください プレイリスト のセクション Player 構成ガイド 詳細については、

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

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