プレイリストの実装

概要

プレイリストを使用する際、最初に決めるべきことは、プレイリストをプレーヤーのどこに配置するかです。通常、Brightcove Player を使用する場合、プレイリストはプレーヤーの右側に縦方向、またはプレーヤーの下に横方向で表示されます。（このドキュメントの後半で説明するように、プレイリストを他の場所に配置する柔軟性もあります。）以下に、縦型および横型プレイリストの実装例を示します。

縦型プレイリストの例

以下は縦型プレイリストの例です:

横型プレイリストの例

以下は横型プレイリストの例です:

プレイリストの方向に加えて、実装に使用する HTML コードを iframe と Videoタグ のどちらにするかも決める必要があります。以下に、選択可能な 4 つのオプションを示します:

実装の概要

プレイリストを使用するには、以下のタスクを完了します:

プレイリストを作成します。Studio で作成するか、JavaScript を使用して手動で作成します。
プレーヤーを有効化し、Studio のプレーヤー設定にある スタイル設定 オプションを使用してプレイリストを使えるようにします。
iframe プレーヤーまたは Videoタグのいずれかの実装方法を使用してプレイリストを実装します。
プログラムでプレイリストを制御したい場合は、Playlist API を使用します。

プレイリストを作成する

以下の 3 つのドキュメントでは、プレイリストの作成方法を説明しています。最初の 2 つは Video Cloud Studio を使用し、最後の 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 を使用して、プレーヤーでプレイリストを利用できるように設定できます。以下の手順に従ってください:

PLAYERS モジュールを開き、新しいプレーヤーを作成するか、プレイリストを有効化したい対象のプレーヤーを探します。
対象のプレーヤーのリンクをクリックし、プレーヤーのプロパティを開きます。
プレーヤー情報 の プレーヤータイプ で プレイリスト のラジオボタンを選択します。
保存をクリックします。
左側のナビゲーションメニューから スタイル設定 をクリックします。
希望する プレイリストタイプ を選択します:
左側のナビゲーションメニューから再生をクリックします。
有効にしたいプレイリストオプションのラジオボタンにチェックを入れます:
プレーヤーを公開するには、公開と埋め込み > 変更の公開 をクリックします。
開いているダイアログを閉じるには、閉じる をクリックします。

iframe プレーヤー

使用するプレイリストが準備でき、プレーヤーでプレイリストを利用できるように有効化したら、実際にプレイリストをプレーヤーで利用する準備が整います。通常どおり、iframe 実装と Videoタグ実装の両方が利用可能です。本セクションでは、iframe 実装でプレイリストを使用する方法を説明します。iframe／縦型プレイリスト実装を使用する場合、ドキュメント冒頭の例で示したように、プレイリストはプレーヤーの右側に表示されます。

プレイリストの公開方法は、動画の公開方法とほぼ同じです。Studio の MEDIA モジュールでプレイリストを選択し、プレイリストの公開 ボタンをクリックします。正しいプレーヤーを選択していることを確認してください。

公開後、コードを選択します。このセクションでは、iframe コードを使用した例を紹介します。コードには、プレーヤーのサイズに関連するオプション（ハイライト部分）を選択できます。

レスポンシブプレーヤーにしたい場合は、非常に便利な選択肢であり、プレーヤーコードは次のようになります:

      <div style="position: relative; display: block; max-width: 960px;">
        <div style="padding-top: 56.25%;">
          <iframe src="https://players.brightcove.net/1507807800001/P0hzAkylr_default/index.html?playlistId=1653281884164948705"
           allowfullscreen="" 
           allow="encrypted-media" 
           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%;"> の値を正しく変更してください。

アスペクト比	プレーヤーのみの padding-top	横型プレイリストの padding-top
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"

Videoタグ埋め込みコードプレーヤー

Studio の MEDIA モジュールでプレイリストを作成し、Studio の PLAYERS モジュールでプレイリスト対応プレーヤーを有効化したら、プレーヤーでプレイリストを実装する準備が整います。iframe 埋め込みコードを使用する場合、プラグインがプレイリストコンテナを作成し、iframe 要素に合わせてサイズを調整します。Videoタグ埋め込みコードを使用する場合は、プレイリストコンテナを自分で用意し、CSS を使ってプレーヤーとプレイリストのサイズを適切に設定する必要があります。

縦型プレイリスト

折りたたみ可能な縦型トレイで iframe のような操作感を提供するために、Brightcove は Videoタグ埋め込みコード向けに Playlist Player Container を用意しています。

Playlist Player Container を使用するには、拡張埋め込みコードを次のようにラップします:

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

固定レイアウトの縦型プレイリスト

固定レイアウトの縦型プレイリストを作成するには、次の手順に従います。

Videoタグ埋め込みコードを取得します。上記のセクションで説明したように、設定済みプレーヤーを使ってプレイリストを公開した後、Videoタグ コードを選択します。次のようなコードになります。
```
      <video-js data-account="1507807800001" 
        data-player="P0hzAkylr" 
        data-embed="default" 
        controls="" 
        data-video-id="" 
        data-playlist-id="1653281884164948705" 
        data-application-id="" 
        width="960" height="540"></video-js>
      <script src="https://players.brightcove.net/1507807800001/P0hzAkylr_default/index.min.js"></script>
```
上記のコードでプレーヤーを表示しても、プレイリストは表示されません。拡張実装のプレーヤーを使用する場合は、必ずプレーヤーを Playlist Player Container でラップする必要があります。

拡張埋め込みコードを Playlist Player Container でラップし、次を追加します。

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

      <div class="vjs-playlist-player-container" style="width: 960px;">
        <video-js data-account="1507807800001"
        data-player="P0hzAkylr"
        data-embed="default"
        controls=""
        data-video-id=""
        data-playlist-id="1653281884164948705"
        data-application-id=""
        width="960" height="540"></video-js>
      </div>
      <script src="https://players.brightcove.net/1507807800001/P0hzAkylr_default/index.min.js"></script>

レスポンシブな縦型プレイリスト

レスポンシブな縦型プレイリストを作成するには、次の手順に従います。

拡張埋め込みコードを取得します。上記のセクションで説明したように、設定済みプレーヤーを使ってプレイリストを公開した後、Videoタグ コードを選択します。次のようなコードになります。
```
      <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>
```
上記のコードでプレーヤーを表示しても、プレイリストは表示されません。拡張実装のプレーヤーを使用する場合は、必ずプレーヤーを Playlist Player Container でラップする必要があります。

レスポンシブプレーヤーでは、max-width スタイルと vjs-fluid クラスを使用している点に注目してください。

video-js 要素を囲む <div> に、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 は拡張インページ埋め込みコード向けに Playlist Player Container を用意しています。

Playlist Player Container を使用するには、拡張埋め込みコードを次のようにラップします:

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

固定レイアウトの横型プレイリスト

固定レイアウトの横型プレイリストを作成するには、次の手順に従います。

拡張埋め込みコードを取得します。上記のセクションで説明したように、設定済みプレーヤーを使ってプレイリストを公開した後、Videoタグ コードを選択します。次のようなコードになります。
```
      <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>
```
上記のコードでプレーヤーを表示しても、プレイリストは表示されません。拡張実装のプレーヤーを使用する場合は、必ずプレーヤーを Playlist Player Container でラップする必要があります。

拡張埋め込みコードを Playlist Player Container でラップし、次を追加します。

プレーヤーサイズと一致する静的な CSS の width
静的な CSS の height（プレーヤーの高さを 0.8 で割った値）。横型プレイリストは利用可能なスペースの 20% を占有するため、プレーヤーの高さは残りの 80% を占有するように設定する必要があります。（例: 540px / 0.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>

レスポンシブな横型プレイリスト

このカスタマイズが最も複雑です。プレーヤーとプレイリストの両方が、幅と高さの両面でレスポンシブになる必要があるためです。

Videoタグ埋め込みコードを取得します。上記のセクションで説明したように、設定済みプレーヤーを使ってプレイリストを公開した後、Videoタグ コードを選択します。次のようなコードになります。
```
      <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>
```
上記のコードでプレーヤーを表示しても、プレイリストは表示されません。拡張実装のプレーヤーを使用する場合は、必ずプレーヤーを Playlist Player Container でラップする必要があります。

レスポンシブプレーヤーでは、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%;">

前述のコンテナを、CSS の padding-top を aspectRatioHeight / aspectRatioWidth / 0.8 * 100 に設定した div 要素でラップします。
```
      <div style="padding-top: 70.3125%;">
```
横型プレイリストは利用可能なスペースの 20% を占有するため、プレーヤーの高さは残りの 80% を占有する必要があります。計算方法は次のとおりです。
- aspectRatioHeight / aspectRatioWidth により、アスペクト比をパーセンテージとして取得します（例: 9 / 16 = 0.5625）。
- このパーセンテージを 0.8 で割り、調整後のパーセンテージを求めます。
- 100 を掛けることで、padding-top の値として使用できる 0〜100 の数値になります。
よく使用されるアスペクト比と、事前計算されたパーセンテージは次のとおりです。
- 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 つの方法があります。

ページで Videoタグ プレーヤーを使用している場合、次のように 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
          controls=""></video-js>
        <script src="https://players.brightcove.net/1507807800001/BJQXwfiuG_default/index.min.js"></script>

これは Brightcove Player に標準で備わっている機能です。

ページで Videoタグ プレーヤーを使用している場合、ページ リクエストに次の URL パラメーターを追加することもできます。
```
        ?playlistVideoId=5510487311001
```
プレーヤーは、プレイリストから指定された動画を自動的に再生します。これは Brightcove Player に標準で備わっている機能です。

ページで Standard (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/1507807800001/P0hzAkylr_default/index.html?playlistId=1653281884164948705"
            allowfullscreen=""
            allow="encrypted-media"
            style="position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%;"></iframe>
        </div>
       </div>

iframe プレーヤーを使用していて、目的の動画の ID を URL のページリクエスト で渡したい場合。この方法は、実際のページ内の iframe コードを編集したくないが、ページリクエストの URL を使って制御したいという点で、3 番目の方法とは異なります。これは Brightcove Player の標準機能ではありませんが、HTML ページ上のカスタムコードで実装できます。次にそのサンプルを示します。

サンプル：ページリクエストで iframe に動画 ID を渡す

以下のコードの大まかなロジックは、最初に再生すべき動画の ID を含むクエリパラメーターを読み取り、その ID を使用して iframe プレーヤーを動的に生成する、というものです。より詳しく言うと、このアプリケーションのロジックは次のとおりです。

HTML の div 要素を作成し、プレーヤーを挿入する位置（挿入ポイント）を指定します。
ヘルパー関数を使用して、ページリクエスト URL から playlistVideoId という名前のクエリパラメーターを読み取ります。
クエリパラメーターを含む src 属性を持つ iframe 要素を動的に生成します。
動的に生成した 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('allow', 'encrypted-media');
              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 番目の動画です。

Playlist API

Playlist API を使用すると、next()、previous()、autoadvance() などのメソッドを使って、プレイリストの操作をプログラムで制御できます。詳細については、ガイド: Playlist API を参照してください。

コードを使用した実装

必要に応じて、Studio を使用せずにすべてをコードで実装してプレイリストを構築することも可能です。基本的な手順は次のとおりです。

プレイリスト UI プラグインの CSS と JavaScript を読み込みます。
プレイリスト設定を反映した オプション オブジェクトを作成します。
bcPlaylistUi() メソッドを呼び出し、設定オブジェクトを引数として渡します。

以下は実装例です。

      <!doctype html>
      <html>
      
      <head>
        <meta charset="UTF-8">
        <title>Untitled Document</title>
        <style type="text/css">
          .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
          controls=""
          autoplay
          width="960" height="540"></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() {
            // プレーヤーの参照を取得
            var myPlayer = this,
              // オプションを格納するオブジェクトを作成
              options = {};
            // オプションを設定
            options.horizontal = true;
            options.autoadvance = 3;
            // オプション オブジェクトを渡してプラグイン メソッドを呼び出す
            myPlayer.bcPlaylistUi(options);
          });
        </script>
      
      </body>
      
      </html>