# 実装方法

# Webページへの組み込み

プレゼンテーションを使用するには、以下の手順を実行します。

プレゼンテーションのソースファイルを読み込みます。

head要素内でプレゼンテーションのソースファイルuliza-presentation.min.jsおよびuliza-presentation.cssを読み込みます。
プレゼンテーション領域を指定します。

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

プレイヤーのvideo／audio要素のidおよび、プレイヤーオプションchapterを含むプレイヤーオプションを指定し、プレイヤーのインスタンスを生成します。プレイヤーオプションの説明は「APIリファレンス (opens new window)」を参照してください。
プレゼンテーションのインスタンスを生成します。
プレゼンテーションの初期化を行います。

プレイヤーのvideo／audio要素のidおよび、プレゼンテーションオプションの以下のパラメータをプレゼンテーションオプションに設定し、UlizaPresentationの初期化を行います。
- enable：プレゼンテーションの有効／無効
- documentUrl：資料の取得URL
- parentElementId： 2. で設定したid

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

<!DOCTYPE html>
<html>
  <head>
    <script src="./js/ulizahtml5.min.js"></script>
    <link href="./css/ulizahtml5.min.css" rel="stylesheet">
    <link href="./css/ulizahtml5-chapter.css" rel="stylesheet">
    <!-- 1. プレゼンテーションのソースファイルを読み込みます。 -->
    <script src="./js/uliza-presentation.min.js"></script>
    <link href="./css/uliza-presentation.css" rel="stylesheet">
  </head>
  <body>
    <video id="video1" class="ulizahtml5"></video>
    <div id="chapter-area" style="width: 400px; height: 400px;"></div>
    <!-- 2. プレゼンテーション領域を指定します。 -->
    <div id="presentation-area" style="width: 400px; height: 400px;"></div>
    <script>
      // 3. プレイヤーのインスタンスを生成します。
      ulizahtml5('video1', {
        width: 640,
        height: 360,
        sources: [{
          src: 'https://host/path/content.mp4',
          type: 'video/mp4'
        }],
        chapter: {
          enable: true,
          parentElementId: 'chapter-area',
          prevButtonVisible: true,
          nextButtonVisible: true,
          item: [
            {
              startTime: 0,
              title: 'プロローグ',
              thumbnailUrl: './thumbnail_1.png',
              data: { page: 1 }
            },
            {
              startTime: 20,
              title: '本編',
              thumbnailUrl: './thumbnail_2.png',
              data: { page: 2 }
            },
            {
              startTime: 130,
              title: 'エンドロール',
              thumbnailUrl: './thumbnail_3.png',
              data: { page: 3 }
            }
          ]
        }
      });
      // 4. プレゼンテーションのインスタンスを生成します。
      var presentation = new UlizaPresentation();
      // 5. プレゼンテーションの初期化を行います。
      var presentationOptions = {
        enable: true,
        documentUrl: './presentation.pdf',
        parentElementId: 'presentation-area'
      };
      presentation.init('video1', presentationOptions);
    </script>
  </body>
</html>

← 機能 API →