このページは Cloud Translation API によって翻訳されました。

IMA DAI SDK スタートガイド

IMA SDK を使用すると、マルチメディア広告をウェブサイトやアプリに簡単に統合できます。IMA SDK では、 VAST 準拠の広告サーバーに広告をリクエストし、アプリでの広告再生を管理できます。IMA DAI SDK を使用すると、アプリは広告とコンテンツ動画（VOD またはライブコンテンツ）のストリームリクエストを行います。SDK は組み合わされた動画ストリームを返すため、アプリ内で広告とコンテンツ動画を切り替える必要はありません。

目的の DAI ソリューションを選択する

フルサービス DAI

このガイドでは、IMA SDK をシンプルな動画プレーヤーアプリに統合する方法について説明します。統合が完了したサンプルを確認する場合は、GitHub からシンプルなサンプルをダウンロードしてください。

IMA DAI の概要

IMA DAI の実装には、このガイドで説明するように、次の 2 つの主要な SDK コンポーネントが必要です。

StreamRequest - VODStreamRequest または LiveStreamRequest: ストリームリクエストを定義するオブジェクト。ストリームリクエストは、ビデオオンデマンドまたはライブ配信のいずれかに対して行うことができます。リクエストでは、コンテンツ ID のほか、API キーまたは認証トークンなどのパラメータを指定します。
StreamManager: ダイナミック広告挿入ストリームと DAI バックエンドとのインタラクションを処理するオブジェクト。また、ストリームマネージャーはトラッキング ping を処理し、ストリームと広告のイベントをパブリッシャーに転送します。

前提条件

空のファイルが 3 つ
- dai.html
- dai.css
- dai.js
コンピュータまたはテストに使用するウェブサーバーにインストールされた Python

開発用サーバーを起動する

IMA SDK は読み込み元のページと同じプロトコルを使用して依存関係を読み込むため、ウェブサーバーを使用してアプリをテストする必要があります。ローカル開発用サーバーを起動する最も簡単な方法は、Python の組み込みサーバーを使用することです。

コマンドラインを使用して、index.html ファイルを含むディレクトリから次のコマンドを実行します。
```
python -m http.server 8000
```
注: http.server は Python 3.x でのみ使用できます。
ウェブブラウザで http://localhost:8000/ にアクセスします。

Apache HTTP Server などの他のウェブサーバーを使用することもできます。

シンプルな動画プレーヤーを作成する

まず、dai.html を変更して、シンプルな HTML5 動画要素と、クリックスルーに使用する div を作成します。また、dai.css ファイルと dai.js ファイルの読み込み、hls.js 動画プレーヤーのインポートに必要なタグも追加します。次に、dai.css を変更して、ページ要素のサイズと位置を指定します。最後に、dai.js で、ストリームリクエスト情報を保持する変数と、ページの読み込み時に実行する initPlayer() 関数を定義します。

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA SDK DAI Demo (HLS.JS)</h2>
    <video id="video"></video>
    <div id="ad-ui"></div>
</body>
</html>

dai.css

#video,
#ad-ui {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#ad-ui {
  cursor: pointer;
}

dai.js

var BACKUP_STREAM =
    'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
}

IMA SDK を読み込む

次に、dai.html のスクリプトタグ（dai.js のタグの前に）を使用して IMA フレームワークを追加します。

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>

StreamManager を初期化してストリームリクエストを行う

一連の広告をリクエストするには、DAI ストリームのリクエストと管理を行う ima.dai.api.StreamManager を作成します。コンストラクタは動画要素を受け取り、結果として得られるインスタンスは広告クリックを処理する広告 UI 要素を受け取ります。

次に、ストリームをリクエストする関数を定義します。この例には、VOD とライブ配信の両方の関数が含まれています。それぞれ VODStreamRequest と LiveStreamRequest のインスタンスを作成し、streamRequest パラメータで streamManager.requestStream() を呼び出します。ライブストリームの場合は、時間指定メタデータイベントをリッスンし、イベントを StreamManager に転送するハンドラも追加する必要があります。ユースケースに合わせて、コードをコメント化またはコメント化解除できます。どちらのメソッドも、オプションの API キーを受け取ります。保護されたストリームを使用する場合は、DAI 認証キーを作成する必要があります。

この例のストリームのどちらも保護されていないため、apiKey は使用されません。

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in the metadata, pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null);
}

function requestVODStream(cmsId, videoId, apiKey) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

ストリームイベントを処理する

最後に、主要な動画イベントのイベントリスナーを実装する必要があります。この簡単な例では、onStreamEvent() 関数を呼び出して LOADED、ERROR、AD_BREAK_STARTED、AD_BREAK_ENDED イベントを処理します。この関数は、ストリームの読み込みとエラーを処理します。また、広告の再生中のプレーヤーコントロールの無効化を処理します。これは SDK で必要です。ストリームが読み込まれると、動画プレーヤーが loadUrl() 関数を使用して、指定された URL を読み込み、再生します。

動画要素の pause イベントと start イベントにイベントリスナーを設定して、ミッドロール挿入点で IMA が一時停止したときにユーザーが再生を再開できるようにすることをおすすめします。

DAI と連携するには、サンプルコードに示すように、カスタムプレーヤーでライブストリームの ID3 イベントを IMA SDK に渡す必要があります。

dai.js

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);

  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     google.ima.dai.api.StreamEvent.Type.ERROR,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
    onStreamEvent,
    false);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

function loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}

function onStreamPause() {
  console.log('paused');
  if (isAdBreak) {
    videoElement.controls = true;
    adUiElement.style.display = 'none';
  }
}

function onStreamPlay() {
  console.log('played');
  if (isAdBreak) {
    videoElement.controls = false;
    adUiElement.style.display = 'block';
  }
}

これで、これで、IMA SDK を使用して広告をリクエストし、表示できます。より高度な SDK 機能については、他のガイドまたは GitHub のサンプルをご覧ください。

IMA DAI SDK スタートガイド

フルサービス DAI

IMA DAI の概要

前提条件

開発用サーバーを起動する

シンプルな動画プレーヤーを作成する

IMA SDK を読み込む

StreamManager を初期化してストリーム リクエストを行う

ストリーム イベントを処理する

StreamManager を初期化してストリームリクエストを行う

ストリームイベントを処理する