プレイリストの実装

In this topic, you will learn the how to use playlists to display a collection of videos that are grouped together in a particular order for playback in a Brightcove Player.

概要

プレイリストを使用する場合、最初に決定すべき決定は、プレイリストとプレーヤーとの関係でどこにするかです。通常、Brightcove Player を使用すると、プレーヤの右または水平方向にプレーヤの下にプレイリストが表示されます。（このマニュアルの後半でわかるように、プレイリストを別の場所に柔軟に見つけることができます）。垂直方向と水平方向に配置されたプレイリストの実装は次のとおりです。

/plugins/playlist-ui-plugin.html

垂直プレイリストの例

以下は、垂直方向のプレイリストを示しています。

水平再生リストの例

以下は、水平方向のプレイリストを示しています。

プレイリストの方向に加えて、実装に使用するHTMLコード（標準または詳細）も決定する必要があります。以下に、結果として得られる4つのオプションを示します。

実装の概要

プレイリストを使用するには、以下のタスクを実行します。

Studioでプレイリストを作成するか、JavaScriptを使用して手動でプレイリストを作成します。
スタジオのプレーヤーのプロパティスタイリングオプションを使用して、プレーヤーがプレイリストを使用できるようにします。
標準 (iframe) プレーヤーまたは詳細設定 (ページ内埋め込み) 実装のいずれかを使用してプレイリストを実装します。
プレイリストをプログラムで制御したい場合は、プレイリストAPI。

プレイリストを作成

次の 3 つのドキュメントでは、プレイリストの作成方法を示します。最初の2つはビデオクラウドスタジオを使用し、最後の1つはJavaScriptを使用しています。

プレイリストを作成するには、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>

プレーヤーを有効にする

Studio を使用して、プレーヤーがプレイリストを使用できるようにすることができます。これを行うには、次の手順に従います。

を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プレイリストを有効にするプレーヤーを見つけます。
プレーヤーのリンクをクリックして、プレイヤーのプロパティを開きます。
にプレイヤー情報、のためにプレイヤータイプクリックプレイリストラジオボタン。
[ 保存] をクリックします。
左側のナビゲーションメニューで [ スタイリング ] をクリックします。
ご希望を選択してくださいプレイリストタイプ：
左側のナビゲーションメニューで [ 再生 ] をクリックします。
有効にするプレイリストオプションのラジオボタンを確認します。
プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします。
開くダイアログを閉じるには、[ 閉じる] をクリックします。

スタンダード (iframe) プレーヤー

プレイリストを使用でき、プレーヤーがプレイリストを使用できるようにしたら、実際にプレイリストをプレーヤーと共に使用する準備が整います。通常どおり、Standard と Advanced プレーヤーの実装を利用できます。このセクションでは、Standard実装でプレイリストを使用する手順を示します。Standard/Vertical Playlist 実装を使用する場合、このドキュメントの上部にある例で見たように、プレイリストはプレイヤーの右側に表示されます。

再生リストを公開すると、ビデオを公開するのと非常によく似ています。Studio の MEDIA モジュールで、プレイリストを選択し、[ プレイリストを公開] ボタンをクリックします。必ず正しいプレーヤーを選択してください。

公開したら、コードを選択します。このセクションでは、標準 (iframe) コードについて説明します。プレーヤーのサイズ設定を処理するコード（強調表示）のオプションを選択できます。

優れたオプションであるレスポンシブプレーヤーが必要な場合は、プレーヤーコードが次のように表示されます。

  <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つの要素と関連する属性は、プレーヤーを応答させるものです。

水平再生リストの調整`padding-top`

表示されたコードはプレイヤー専用です。水平再生リストを使用している場合は、プレイリスト用のスペースを作るためにコードを少し調整する必要があります。<div style="padding-top: 56.25%;">値を正しく変更するには、次の表を使用します。

アスペクト比	パディングトップ（プレイヤーのみ）	水平プレイリスト付きのパディングトップ
4:3	75%	93.75%
16:9	56.25%	70.31%

つまり、16:9 のアスペクト比のビデオを使用している場合、padding-top値は次のように表示されます。

  <div style="padding-top: 70.31%;">

プレイリストを手動で変更する

iframe 実装で使用するプレイリストを変更する場合は、iframe srcの属性を変更するだけです。IDを使用する場合:

  <iframe src="https://players.brightcove.net/.../index.html?playlistId=1754200320001"

または参照IDを使用している場合：

  <iframe src="https://players.brightcove.net/.../index.html?playlistId=ref:myrefid001"

高度な (ページ内埋め込み) プレーヤー

Studio の MEDIA モジュールでプレイリストを作成し、Studio の PLAYERS モジュールでプレイリストプレーヤーを有効にしたら、プレーヤーでプレイリストを実装する準備が整います。 Standard 埋め込みコードを使用すると、プラグインはプレイリストコンテナを作成し、iframe要素に合わせてサイズを変更します。高度なインページ埋め込みコードでは、プレイリストコンテナを指定し、CSS を使用してプレーヤーとプレイリストのサイズを適切に設定する必要があります。

垂直プレイリスト

折りたたみ可能な垂直トレイでiframeのような体験を提供するために、Brightcoveはプレイリストプレーヤーコンテナ高度なページはめ込み埋め込みコード用。

プレイリストプレーヤーコンテナを使用するには、高度な埋め込みコードを次のようにラップします。

<div class="vjs-playlist-player-container">

固定、垂直再生リスト

固定された垂直再生リストを作成するには、次の手順に従います。

高度な埋め込みコードを取得します。設定済みのプレーヤーを使用してプレイリストを公開したら (上記のセクションを参照)、[ Advanced]コードを選択します。これはこれに似ているはずです：
```
<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>
```
上記のコードでプレイヤーを見た場合、プレイリストは表示されません。プレーヤーの高度な実装を使用する場合は、プレイリストプレーヤーコンテナにプレーヤーをラップする必要があります。

高度な埋め込みコードをプレイリストプレーヤーコンテナでラップし、以下を追加します。

widthプレーヤーのサイズに一致する静的 CSS

<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>

レスポンシブで垂直再生リスト

レスポンシブで垂直方向のプレイリストを作成するには、次の手順に従います。

高度な埋め込みコードを取得します。設定済みのプレーヤーを使用してプレイリストを公開したら (上記のセクションを参照)、[ Advanced]コードを選択します。これはこれに似ているはずです：
```
<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>
```
上記のコードでプレーヤーを表示した場合、プレイリストが表示されません。プレーヤーの高度な実装を使用する場合は、プレイリストプレーヤーコンテナにプレーヤーをラップする必要があります。

max-widthvjs-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はプレイリストプレーヤーコンテナ高度なページはめ込み埋め込みコード用。

プレイリストプレーヤーコンテナを使用するには、高度な埋め込みコードを次のようにラップします。

<div class="vjs-playlist-player-container">

固定、水平再生リスト

固定された水平再生リストを作成するには、次の手順に従います。

高度な埋め込みコードを取得します。設定済みのプレーヤーを使用してプレイリストを公開したら (上記のセクションを参照)、[ Advanced]コードを選択します。これはこれに似ているはずです：
```
<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>
```
上記のコードでプレーヤーを表示した場合、プレイリストが表示されません。プレーヤーの高度な実装を使用する場合は、プレイリストプレーヤーコンテナにプレーヤーをラップする必要があります。
高度な埋め込みコードをプレイリストプレーヤーコンテナでラップし、以下を追加します。
- widthプレーヤーのサイズに一致する静的 CSS
- heightプレイヤーの高さを0.8で割った値に等しい静的 CSS。水平再生リストが使用可能な領域の 20% を占めるため、プレイリストの使用可能領域の 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>
```

レスポンシブで水平方向のプレイリスト

プレイヤーとプレイリストの両方が幅と高さに関してrespsonsiveである必要があるため、これは最も複雑なカスタマイズです。

高度な埋め込みコードを取得します。設定済みのプレーヤーを使用してプレイリストを公開したら (上記のセクションを参照)、[ Advanced]コードを選択します。これはこれに似ているはずです：
```
<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>
```
上記のコードでプレーヤーを表示した場合、プレイリストが表示されません。プレーヤーの高度な実装を使用する場合は、プレイリストプレーヤーコンテナにプレーヤーをラップする必要があります。

レスポンシブプレーヤーは、max-widthvjs-fluidスタイルとクラスを使用していることに注意してください。
video-js要素で、vjs-fluidクラスを削除し、vjs-fill。
```
class="vjs-fill"
```

video-jsdiv次のように要素を要素でラップします。

<div class="vjs-playlist-player-container" style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;">

divpadding-top CSSに等しい要素に前のコンテナをラップします。aspectRatioHeight / aspectRatioWidth / 0.8 * 100。
```
<div style="padding-top: 70.3125%;">
```
水平再生リストが使用可能な領域の 20% を占めるため、利用可能な領域の 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>

最初のビデオを設定する

デフォルトでは、プレイリストの最初のビデオは最初にプレーヤーにロードされます。プレイリストに別のビデオを最初にロードする場合は、次の 4 つの方法があります。

詳細設定 (ページ内埋め込み) プレーヤーを使用している場合は、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 の機能に組み込まれています。

ページ上で詳細設定 (ページ内埋め込み) プレーヤーを使用している場合。ページリクエストには、次の URL パラメーターを追加できます。
```
  ?playlistVideoId=5510487311001
```
プレーヤーはプレイリストから目的のビデオを自動的に再生します。これは Brightcove Player の機能に組み込まれています。

ページ上でスタンダード（iframe）プレーヤーを使用している場合。iframe srcの属性に URL パラメータを追加できます。

  <iframe src=".../index.html?playlistId=5531423971001&playlistVideoId=5510487311001" ...

プレーヤーはプレイリストから目的のビデオを自動的に再生します。これは Brightcove Player の機能に組み込まれています。この手法のサンプルをここに示します (パラメーターの使用を確認するには、コードを右端までスクロールする必要があります)。

  <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 プレーヤーを使用していて、 URL ページリクエストで目的の動画の ID を渡したいです。実際のページで iframe のコードを編集する必要はありませんが、ページリクエストの URL を使用するため、これは #3 とは異なります。これは Brightcove Player の機能に組み込まれていませんが、HTML ページのカスタムコードを使用して実行できます。次に、このテクニックのサンプルを示します。

サンプル:ページリクエストでiframe用のビデオIDを送信する

最高レベルでは、次のコードの背後にあるロジックは、最初に再生する必要があるビデオのビデオ ID を含むクエリパラメータが読み取られ、次にその ID を使用してiframeプレーヤーが動的に生成されます。より詳細に説明すると、このアプリケーションの背後にあるロジックは次のとおりです。

挿入ポイントは、div HTML要素を作成することによって指定されます。
playListVideoID という名前のクエリパラメーターは、ヘルパー関数を使用して、ページ要求 URL から読み取られます。
iframesrcクエリパラメータを含む属性を含む要素は動的に構築されます。
動的に作成された 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>

以下は、プレーヤーにロードされたビデオがプレイリストの最初のものではなく、2番目のビデオである作業サンプルです。

プレイリスト API

プレイリスト API を使用すると、プレイリストの使用をプログラムで制御できます。たとえばnext()previous()、autoadvance()メソッド。ガイド:プレイリスト API ドキュメントは、完全な詳細を提供します。

コードを使用して実装する

選択した場合、プレイリストを完全にコードで実装し、Studio を避けることができます。基本的な手順は次のとおりです。

プレイリスト UI プラグインの CSS と JavaScript をロードします。
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>