ガイド:プレイリスト API
概要
API の一部として、次のメソッド、イベント、および設定オプションを使用できます。
カテゴリ | 名前 | 説明 |
---|---|---|
オブジェクト | Playlist Item Object |
プレイリストは、プレイリスト項目の配列です。 |
方法 | autoadvance() |
再生リストの次のビデオを再生するかどうか、およびそれまでに待機する時間を指定します。 |
方法 | contains() |
アイテムがプレイリストにあるかどうかをチェックします。 |
方法 | currentIndex() |
プレイリストの現在の項目のインデックスを取得します。 |
方法 | currentItem() |
プレーヤーの現在のビデオを割り当てるか、取得します。 |
方法 | first() |
プレイリストの最初のビデオを再生します。 |
方法 | indexOf() |
再生リストにビデオが存在することをチェックし、そのインデックスを返します。 |
方法 | last() |
プレイリストの最後のビデオを再生します。 |
方法 | lastIndex() |
プレイリストの最後の項目のインデックスを取得します。 |
方法 | next() |
プレーヤーで現在再生されているビデオの後にビデオを再生します。 |
方法 | nextIndex() |
プレーヤーで現在再生されているビデオに続くビデオのインデックスを取得します。 |
方法 | playlist() |
プレーヤーに関連付けられている現在のプレイリストを割り当て、または取得します。 |
方法 | previous() |
プレーヤーで現在再生されているビデオを続行してビデオを再生します。 |
方法 | previousIndex() |
プレーヤーで現在再生中のビデオを続行するビデオのインデックスを取得します。 |
方法 | repeat() |
プレイリスト内のすべての動画が再生されると、はプレイリストの再生を再開します。 |
方法 | reverse() |
プレイリスト内のビデオの順序を逆にします。 |
方法 | shuffle() |
プレイリストのアイテムの順番をシャッフル/ランダム化します。 |
方法 | sort() |
プレイリストの項目を並べ替えます。 |
イベント | beforeplaylistitem |
プレイリスト内の新しいビデオに切り替える前に送出されます。 |
イベント | duringplaylistchange |
このイベントは、呼び出し時にプレイリストのコンテンツが変更された後playlist() 、現在のプレイリスト項目が変更される前に発生します。 |
イベント | playlistchange |
プレーヤーに関連付けられたプレイリストが変更されるたびに送出されます。 |
イベント | playlistitem |
再生リスト内の新しいビデオに切り替えたときに送出されます。 |
イベント | playlistsorted |
プレイリスト項目の順序を変更するメソッドが呼び出されたときに送出されます。 |
設定オプション | playOnSelect |
再生リストからクリックしたビデオの再生を開始します。これは、プレーヤー内の現在のビデオが以前に一時停止されていた場合でも同様です。 |
例
次の Brightcove Player では、プレイリストが読み込まれ、プレイリスト内で移動できるボタンが使用されています。
プレイリストアイテムオブジェクト
プレイリスト項目は、次のプロパティを持つオブジェクトです。プロパティ | タイプ | 必須 | 説明 |
---|---|---|---|
ソース | アレイ | はい | video.js が理解できるソースの配列。 |
ポスター | ストリング | いいえ | これらのソースに表示するポスター画像。 |
テキストトラック | アレイ | いいえ | Video.js が理解できるテキストトラックの配列。 |
オートアドバンス () メソッド
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
が返されます。
パラメータ:
- アイテム :プレイリスト内の 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);
)};
options()
メソッドによって返されたオブジェクトを使用して、プレイリスト ID を取得できます。console.log
構文を示すのは次のとおりです。
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
このメソッドは、true
false
引数としてまたはを渡すことによって値を設定します。引数を使用しない場合、このメソッドは現在の値を返します。次のコードは、実装を示しています。
- 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);
カタログプレイリスト
ドキュメントで前述したように、プレイリストはVideo Cloudプレイリストにすることができます。player.catalog.getPlaylist()
メソッドを使用して Video Cloud プレイリストを取得できます。次に、player.catalog.load()
メソッドを使用してプレイリストをプレーヤーにロードします。次のコードは、この使用方法を示しています。
myPlayer = this;
myPlayer.catalog.getPlaylist('1754200320001', function(error, playlist){
myPlayer.catalog.load(playlist);
console.log('mediainfo', myPlayer.mediainfo);
});