プレイリストの実装
概要
プレイリストを使用する場合、最初に決定する必要があるのは、 player。 通常、使用する場合 Brightcove Player 右側にプレイリストが表示されます player 垂直または下 player 水平に。 (このドキュメントの後半で説明するように、他の場所にプレイリストを配置する柔軟性があります。)垂直方向および水平方向に配置されたプレイリストの実装が続きます。
/plugins/playlist-ui-plugin.html垂直再生リストの例
垂直再生リストは次のとおりです。
水平再生リストの例
水平再生リストを次に示します。
プレイリストの指示とともに、実装に使用するHTMLコードを決定する必要があります。 スタンダード or 高度な。 次の4つの結果オプションが表示されます。

実装の概要
プレイリストを使用するには、以下のタスクを実行します。
- プレイリストを作成する どちらかに Studio またはJavaScriptを使用して手動で。
- あなたを有効にする player プレイリストを使用するには Studio's player プロパティ スタイリング オプションを選択します。
- 次のいずれかを使用してプレイリストを実装します。 標準(iframe) player または 高度な(ページはめ込み) インプリメンテーション。
- プレイリストをプログラムで制御したい場合は、 プレイリストAPI.
プレイリストを作成する
次の3つのドキュメントは、プレイリストを作成する方法を示しています。 最初の2つは Video Cloud Studio そして最後のものはJavaScriptを使用しています。
プレイリストを作成するには、 player's playlist()
メソッドをJSONと共に使用して、プレイリスト内のビデオを定義します。 次のコードは例を示しています。
<script type="text/javascript">
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
myPlayer.playlist([{
"sources": [{
"src": "http://solutions.brightcove.com/bcls/assets/videos/Sea_SeaHorse.mp4", "type": "video/mp4"
}],
"name": "Seahorse",
"thumbnail": "http://solutions.brightcove.com/bcls/assets/images/Sea_Seahorse_poster.png",
"poster": "http://solutions.brightcove.com/bcls/assets/images/Sea_Seahorse_poster.png"
}, {
"sources": [{
"src": "http://solutions.brightcove.com/bcls/assets/videos/Sea_Anemone.mp4", "type": "video/mp4"
}],
"name": "Sea Anemone",
"thumbnail": "http://solutions.brightcove.com/bcls/assets/images/Sea_Anemone_poster.png",
"poster": "http://solutions.brightcove.com/bcls/assets/images/Sea_Anemone_poster.png"
}, {
"sources": [{
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.mp4", "type": "video/mp4"
}],
"name": "Tiger",
"thumbnail": "http://solutions.brightcove.com/bcls/assets/images/Tiger_poster.png",
"poster": "http://solutions.brightcove.com/bcls/assets/images/Tiger_poster.png"
}, {
"sources": [{
"src": "http://solutions.brightcove.com/bcls/assets/videos/Sea_ClownFish.mp4", "type": "video/mp4"
}],
"name": "Clownfish",
"thumbnail": "http://solutions.brightcove.com/bcls/assets/images/Sea_ClownFish_poster.png",
"poster": "http://solutions.brightcove.com/bcls/assets/images/Sea_ClownFish_poster.png"
}, {
"sources": [{
"src": "http://solutions.brightcove.com/bcls/assets/videos/Sea_LionFish.mp4", "type": "video/mp4"
}],
"name": "Lionfish",
"thumbnail": "http://solutions.brightcove.com/bcls/assets/images/Sea_LionFish_poster.png",
"poster": "http://solutions.brightcove.com/bcls/assets/images/Sea_LionFish_poster.png"
}]);
});
</script>
有効にします player
あなたが使用することができます Studio あなたを可能にする player プレイリストを使用する。 次の手順に従ってください。
- Video Cloud Studioで PLAYERS モジュールと新しいのいずれかを作成します player または見つけます player プレイリストを有効にしたい。
- リンクをクリックすると player を開く playerのプロパティ。
- In プレーヤー情報、用 Player 種類 クリック プレイリスト ラジオボタン。
- ナビゲーションヘッダーの セットで€6.
- ナビゲーションヘッダーの スタイリング 左側のナビゲーションメニュー。
- あなたの希望を選択してください プレイリストタイプ:
- ナビゲーションヘッダーの Playback 左側のナビゲーションメニュー。
- 有効にするプレイリストオプションのラジオボタンを確認します。
- 公開するには player、クリック パブリッシュと埋め込み>変更の公開をクリックします。.
- 開いているダイアログを閉じるには、 閉じる.
標準(iframe) player
使用するプレイリストがあり、有効にしたら player プレイリストを使用するには、実際にプレイリストを使用する準備ができています player。 いつものように、スタンダードとアドバンスがあります player 利用可能な実装。 このセクションでは、標準実装でプレイリストを使用するための手順を示します。 標準/垂直プレイリストの実装を使用している場合、プレイリストは右側に表示されます player、このドキュメントの上部の例で見たように。
動画を公開するのと同じようにプレイリストを公開します。 に Studio's MEDIA モジュールを選択し、プレイリストを選択して プレイリストを公開する ボタン。 正しいものを選択してください player.

公開したら、コードを選択します。 このセクションでは、 標準(iframe) コードを示します。 処理するコード(強調表示)のオプションを選択できます player サイジング。

レスポンシブにしたい場合 player、これは優れたオプションです。 player コードは次のように表示されます:
<div style="position: relative; display: block; max-width: 640px;">
<div style="padding-top: 56.25%;">
<iframe src="https://players.brightcove.net/1752604059001/S13cJdUBz_default/index.html?playlistId=5718313430001"
allowfullscreen
webkitallowfullscreen
mozallowfullscreen
style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
</div>
</div>
2 div
要素と関連する属性は、 player 応答。
調整する padding-top
水平再生リストの場合
表示されたばかりのコードは player のみ。 あなたが使用している場合 水平な プレイリストのスペースを確保するには、コードを手動で調整する必要があります。 次の表を使用して、 <div style="padding-top: 56.25%;">
値。
アスペクトレーティング | パッド入りトップ player のみ | 水平再生リストを含むパディングトップ |
---|---|---|
4:3 | 67% | 67% |
16:9 | 67% | 67% |
つまり、16:9アスペクト比のビデオを使用している場合、 padding-top
値は次のように表示されます。
<div style="padding-top: 70.31%;">
プレイリストを手動で変更する
iframe実装で使用するプレイリストを変更する場合は、 src
iframeの属性。 IDを使用している場合:
<iframe src="https://players.brightcove.net/.../index.html?playlistId=1754200320001"
または参照IDを使用している場合:
<iframe src="https://players.brightcove.net/.../index.html?playlistId=ref:myrefid001"
高度な(ページはめ込み) player
でプレイリストを作成した後 Studio's MEDIA モジュール、およびプレイリストを有効にしました player in Studio's PLAYERS モジュール、あなたはプレイリストを実装する準備ができています player。 とともに 標準埋め込みコードプラグインはプレイリストコンテナを作成し、サイズに合わせてサイズを調整します。 iframe
素子。 高度なページはめ込みコードでは、プレイリストコンテナーを提供し、CSSを使用して player プレイリストを適切に。
縦型プレイリスト
折りたたみ式の縦型トレイでiframeのような体験を提供するために、 Brightcove は、 プレイリスト Player コンテナ 高度なページ内埋め込みコードの場合。

プレイリストを使用するには Player コンテナ、高度な埋め込みコードを以下でラップします。
<div class="vjs-playlist-player-container">
固定垂直プレイリスト
固定垂直プレイリストを作成するには、次の手順に従います。
-
高度な埋め込みコードを取得します。 設定した方法でプレイリストを公開した後 player (上記のセクションで詳しく説明したように)、 高度な コード。 これは次のようになります。
<video-js data-account="1752604059001" data-player="5dBwlwbNk" data-embed="default" controls="" data-video-id="" data-playlist-id="5686354139001" data-application-id="" width="960" height="540"> </video-js>
あなたが見た場合 player 上記のコードでは、プレイリストは表示されません。 の高度な実装を使用する場合 player あなたはラップする必要があります player プレイリストで Player 容器。
-
プレイリストで高度な埋め込みコードをラップする Player コンテナー、および次を追加します。
-
静的CSS
width
と一致する player サイズ
<div class="vjs-playlist-player-container" style="width: 960px;"> <video-js data-account="1752604059001" data-player="5dBwlwbNk" data-embed="default" controls="" data-video-id="" data-playlist-id="5686354139001" data-application-id="" width="960" height="540"> </video-js> </div> <script src="https://players.brightcove.net/1752604059001/5dBwlwbNk_default/index.min.js"></script>
-
レスポンシブ、縦型プレイリスト
レスポンシブ垂直プレイリストを作成するには、次の手順に従います。
-
高度な埋め込みコードを取得します。 設定した方法でプレイリストを公開した後 player (上記のセクションで詳しく説明したように)、 高度な コード。 これは次のようになります。
<div style="max-width: 960px;"> <video-js data-account="1752604059001" data-player="5dBwlwbNk" data-embed="default" controls="" data-video-id="" data-playlist-id="5686354139001" data-application-id="" class="vjs-fluid"> </video-js> </div> <script src="https://players.brightcove.net/1752604059001/5dBwlwbNk_default/index.min.js"></script>
あなたが見た場合 player 上記のコードでは、プレイリストは表示されません。 の高度な実装を使用する場合 player あなたはラップする必要があります player プレイリストで Player 容器。
レスポンシブ player 使用
max-width
スタイルとvjs-fluid
クラス。 -
〜に
<div>
周りのラッパーvideo-js
要素、追加vjs-playlist-player-container
クラス。<div class="vjs-playlist-player-container" style="max-width: 960px;"> <video-js data-account="1752604059001" data-player="5dBwlwbNk" data-embed="default" controls="" data-video-id="" data-playlist-id="5686354139001" data-application-id="" class="vjs-fluid"> </video-js> </div> <script src="https://players.brightcove.net/1752604059001/5dBwlwbNk_default/index.min.js"></script>
水平プレイリスト
水平方向のプレイリストでiframeのような体験を提供するには、 Brightcove は、 プレイリスト Player コンテナ 高度なページ内埋め込みコードの場合。

プレイリストを使用するには Player コンテナ、高度な埋め込みコードを以下でラップします。
<div class="vjs-playlist-player-container">
固定水平プレイリスト
固定された水平方向の再生リストを作成するには、次の手順に従います。
-
高度な埋め込みコードを取得します。 設定した方法でプレイリストを公開した後 player (上記のセクションで詳しく説明したように)、 高度な コード。 これは次のようになります。
<video-js data-account="1752604059001" data-player="5dBwlwbNk" data-embed="default" controls="" data-video-id="" data-playlist-id="5686354139001" data-application-id="" width="960" height="540"> </video-js> <script src="https://players.brightcove.net/1752604059001/5dBwlwbNk_default/index.min.js"></script>
あなたが見た場合 player 上記のコードでは、プレイリストは表示されません。 の高度な実装を使用する場合 player あなたはラップする必要があります player プレイリストで Player 容器。
-
プレイリストで高度な埋め込みコードをラップする Player コンテナー、および次を追加します。
- 静的CSS
width
と一致する player サイズ -
静的CSS
height
に等しい playerの高さを0.8で割った値。 水平プレイリストは利用可能なスペースの20%を占めるので、 player 利用可能なスペースの80%を占める高さ。 (例:540px / .8 = 675px)
<div class="vjs-playlist-player-container" style="width: 960px; height: 675px;"> <video-js data-account="1752604059001" data-player="5dBwlwbNk" data-embed="default" controls="" data-video-id="" data-playlist-id="5686354139001" data-application-id="" width="960" height="540"> </video-js> </div> <script src="https://players.brightcove.net/1752604059001/5dBwlwbNk_default/index.min.js"></script>
- 静的CSS
レスポンシブ、水平プレイリスト
これは最も複雑なカスタマイズです。 player プレイリストは、幅と高さに関して応答性がある必要があります。
-
高度な埋め込みコードを取得します。 設定した方法でプレイリストを公開した後 player (上記のセクションで詳しく説明したように)、 高度な コード。 これは次のようになります。
<div style="max-width: 960px;"> <video-js data-account="1752604059001" data-player="5dBwlwbNk" data-embed="default" controls="" data-video-id="" data-playlist-id="5686354139001" data-application-id="" class="vjs-fluid"> </video-js> </div> <script src="https://players.brightcove.net/1752604059001/5dBwlwbNk_default/index.min.js"></script>
あなたが見た場合 player 上記のコードでは、プレイリストは表示されません。 の高度な実装を使用する場合 player あなたはラップする必要があります player プレイリストで Player 容器。
レスポンシブ player 使用
max-width
スタイルとvjs-fluid
クラス。 -
の中に
video-js
要素、削除しますvjs-fluid
クラスとそれを置き換えるvjs-fill
.class="vjs-fill"
-
を包む
video-js
要素とdiv
要素は次のようになります。<div class="vjs-playlist-player-container" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">
-
前のコンテナーを
div
CSSを持つ要素padding-top
に等しい:aspectRatioHeight / aspectRatioWidth / 0.8 * 100
.<div style="padding-top: 70.3125%;">
水平プレイリストは利用可能なスペースの20%を占めるので、 player 使用可能なスペースの80%を占めます。 これが私たちが数学を理解した方法です:
aspectRatioHeight / aspectRatioWidth
縦横比をパーセンテージで表示します(例:9 / 16 = 0.5625)- この割合を0.8で割ると、調整された割合がわかります。
-
100を掛けると、0から100までの数が得られます。
padding-top
値。
これが一般的なアスペクト比とそれらの事前計算されたパーセンテージです:
16:9
収量70.3125%
16:10
収量78.125%
4:3
収量93.75%
-
前のコンテナーを
div
要素は次のようになります。<div style="position: relative; display: block; max-width: 960px;">
-
完全なコードは次のようになります。
<div style="position: relative; display: block; max-width: 960px;"> <div style="padding-top: 70.3125%;"> <div class="vjs-playlist-player-container" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"> <video-js data-account="1752604059001" data-player="5dBwlwbNk" data-embed="default" controls="" data-video-id="" data-playlist-id="5686354139001" data-application-id="" class="vjs-fill"> </video-js> </div> </div> </div> <script src="https://players.brightcove.net/1752604059001/5dBwlwbNk_default/index.min.js"></script>
最初の動画を設定する
デフォルトでは、プレイリストの最初の動画は最初に player。 最初に再生リストに別のビデオをロードしたい場合、XNUMXつの可能性があります。
- あなたが 高度な(ページはめ込み) player 追加できます
data-playlist-video-id
次のように、プレイリストから再生する初期ビデオを設定する属性として使用します。<video-js data-playlist-id="5455901760001" data-playlist-video-id="5357926703001" data-account="1507807800001" data-player="BJQXwfiuG" data-embed="default" data-application-id class="video-js" controls></video-js> <script src="https://players.brightcove.net/1507807800001/BJQXwfiuG_default/index.min.js"></script>
これは組み込まれています Brightcove Player 機能性。
- あなたが 高度な(ページはめ込み) player ページ上。 次のURLパラメータを ページ リクエスト:
?playlistVideoId=5510487311001
- あなたが 標準(iframe) player ページ上。 URLパラメータをiframeの
src
属性:<iframe src=".../index.html?playlistId=5531423971001&playlistVideoId=5510487311001" ...
<div style="position: relative; display: block; max-width: 640px;"> <div style="padding-top: 56.25%;"> <iframe src="https://players.brightcove.net/1752604059001/HkYoUgMwW_default/index.html?playlistId=5531423971001&playlistVideoId=5510487311001" allowfullscreen webkitallowfullscreen mozallowfullscreen style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></iframe> </div> </div>
- iframeを使用しています player で目的の動画のIDを渡したい URLページリクエスト。 これは#3と異なり、iframeのコードを実際のページで編集する必要はなく、ページリクエストのURLを使用します。 これは組み込まれていません Brightcove Player HTMLページ上のカスタムコードで行うことができます。 次に、この手法のサンプルを示します。
サンプル:iframeの動画IDを ページ要求
最高レベルでは、次のコードの背後にあるロジックは、最初に再生する必要のあるビデオのビデオID、次にiframeを含むクエリパラメーターの読み取りです。 player そのIDを使用して動的に生成されます。 より詳細には、このアプリケーションの背後にあるロジックは次のとおりです。
- 挿入ポイントは、HTMLを作成することによって指定されます
div
要素。 - 名前付きのクエリパラメータ playlistVideoId ヘルパー機能の助けを借りてページリクエストURLから読み込まれます。
- An
iframe
要素が動的に構築されます。src
クエリパラメータを含む属性。 - 動的に作成されたiframeがページに挿入されます。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div id="place_player_here"></div>
<script type="text/javascript">
var theParamValue,
iframe = document.createElement('iframe'),
insertionPoint = document.getElementById("place_player_here");
// Use the helper function below to get the value of the parameter
theParamVideoID = getURLparam("playlistVideoId");
// Dynamically build the iframe
iframe.setAttribute('allowfullscreen', 'allowfullscreen');
iframe.setAttribute('webkitallowfullscreen', 'webkitallowfullscreen');
iframe.setAttribute('mozallowfullscreen', 'mozallowfullscreen');
iframe.setAttribute('style', "width: 610px;height: 344px");
iframe.src = 'https://players.brightcove.net/1752604059001/H1HpIEcCb_default/index.html?playlistId=4450721964001&playlistVideoId=' + theParamVideoID;
// Insert the iframe into the page
insertionPoint.appendChild(iframe);
// Helper function to get value for a specific URL parameter
function getURLparam(name) {
var regex, results;
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
results = regex.exec(location.search);
return results === null ?
"" :
decodeURIComponent(results[1].replace(/\+/g, " "));
}
</script>
</body>
</html>
以下は、ビデオが player はプレイリストの最初のものではなく、XNUMX番目です。
プレイリストAPI
Playlist APIを使用すると、プレイリストの使用方法をプログラムで制御できます next()
, previous()
更に autoadvance()
メソッド。 ザ ガイド:プレイリストAPI ドキュメントは完全な詳細を提供します。
コードを使用して実装する
選択した場合、プレイリストを完全にコードで実装し、 Studio。 基本的な手順は次のとおりです。
- あなたのためのCSSとJavaScriptを読み込みます プレイリストUIプラグイン.
- 設定する
options
あなたのプレイリスト設定を反映するオブジェクト。 - コール
bcPlaylistUi()
メソッドを呼び出し、設定オブジェクトをパラメータとして渡します。
実装の例を次に示します。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
.video-js {
height: 350px;
width: 625px;
}
.vjs-playlist {
width: 625px;
}
</style>
<link href="https://players.brightcove.net/videojs-bc-playlist-ui/3/videojs-bc-playlist-ui.css" rel="stylesheet">
</head>
<body>
<video-js id="myPlayerID"
data-playlist-id="4450721964001"
data-account="1752604059001"
data-player="default"
data-embed="default"
data-application-id
class="video-js"
controls
autoplay></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>
<!-- Location of the playlist -->
<div class="vjs-playlist"></div>
<script src="https://players.brightcove.net/videojs-bc-playlist-ui/3/videojs-bc-playlist-ui.min.js"></script>
<script type="text/javascript">
videojs.getPlayer('myPlayerID').ready(function() {
// Get a reference to the player
var myPlayer = this,
// Create an object in which you will place options
options = {};
// Set options
options.horizontal = true;
options.autoadvance = 3;
// Call plugins method passing in options object
myPlayer.bcPlaylistUi(options);
});
</script>
</body>
</html>