プレイリストの実装

このトピックでは、プレイリストを使用して、特定の順序でグループ化されたビデオのコレクションを表示する方法を学習します。 Brightcove Player.

概要

プレイリストを使用する場合、最初に決定する必要があるのは、 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 種類 クリック プレイリスト ラジオボタン。
ナビゲーションヘッダーの保存.
ナビゲーションヘッダーの スタイリング 左側のナビゲーションメニュー。
あなたの希望を選択してください プレイリストタイプ:
ナビゲーションヘッダーの 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	75%以下	93.75%以下
16：9	56.25%以下	70.31%以下

つまり、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>

レスポンシブ、水平プレイリスト

これは最も複雑なカスタマイズです。 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
```
player プレイリストから目的のビデオを自動的に再生します。これは組み込まれています Brightcove Player 機能性。

あなたが 標準（iframe） player ページ上。 URLパラメータをiframeの src 属性：

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

player プレイリストから目的のビデオを自動的に再生します。これは組み込まれています 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を使用しています 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>