# 実装方法

# Webページへの組み込み

プレイリストを使用するには、以下の手順を実行します。なお、プレイリストが動作するには、同ページにプレイヤーが組み込まれていることを前提とします。プレイヤーの組み込み方法は、インテグレーションガイド (opens new window)を参照してください。

プレイリストのソースファイルを読み込みます。

head要素内でプレイリストのソースファイルulizaplaylist.min.jsおよびulizaplaylist.cssを読み込みます。
プレイリスト領域を指定します。

プレイリストは、Webページの任意のdiv要素の中に表示します。対象のdiv要素を特定する必要があるため、id属性を設定してください。
プレイリストのインスタンスを生成します。

プレイリストオプションの以下のパラメータをプレイリストオプションに設定し、UlizaPlaylistクラスのインスタンスを生成します。主要なパラメタの説明は以下の通りです。
- parentElementId： 2. で設定したid
- mediaElementId：プレイヤーのvideo／audio要素のid
- items[n].thumbUrl：サムネイルのURL
- items[n].description：コンテンツの説明文等のテキスト
- items[n].playerOptions：プレイヤーオプション
以下のパラメータは必要に応じ設定します。
- repeatType：リピート再生のタイプ
- defaultIndex：プレイリストの初期化完了時に選択状態にする項目のIndex
- enableResumeIndex：レジュームの有効／無効
- playerWidth：プレイヤーの幅
- playerHeight：プレイヤーの高さ
- playerAspectRatio：プレイヤーのアスペクト比

組み込み例は以下の通りです。

<!DOCTYPE html>
<html>
  <head>
    <script src="./js/ulizahtml5.min.js"></script>
    <link href="./css/ulizahtml5.min.css" rel="stylesheet">
    <!-- 1. プレイリストのソースファイルを読み込みます。 -->
    <script src="./js/ulizaplaylist.min.js"></script>
    <link href="./css/ulizaplaylist.css" rel="stylesheet">
  </head>
  <body>
    <video id="video1" class="ulizahtml5"></video>
    <!-- 2. プレイリスト領域を指定します。 -->
    <div id="playlist1" style="width: 800px; height: 300px;"></div>
    <script>
      // 3. プレイリストのインスタンスを生成します。
      var playlistOptions = {
        parentElementId: 'playlist1',
        mediaElementId: 'video1',
        repeatType: 'all',
        defaultIndex: 0,
        enableResumeIndex: true,
        items: [
          {
            thumbUrl: 'https://host/path/thumbnail1.png',
            description: '項目1',
            playerOptions: {
              sources: [{
                src: 'https://host/path/item1.mp4',
                type: 'video/mp4'
              }]
            }
          },
          {
            thumbUrl: 'https://host/path/thumbnail2.png',
            description: '項目2',
            playerOptions: 'https://host/path/player_options1.json'
          }
        ]
      };
      var playlist = new UlizaPlaylist(playlistOptions);
    </script>
  </body>
</html>

# プレイヤーオプション

プレイヤーオプションは、Objectまたは文字列（URL）を指定できます。文字列（URL）を指定する場合は、JSON形式のプレイヤーオプションを返却するURLを指定してください。ただし、JSONにはFunctionを記述できないため、プレイヤーの一部の機能を使用できません。

← 機能 API →