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

始める

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

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

IMA DAI の概要

IMA DAI を実装するには、このガイドで説明する 2 つの主要な SDK コンポーネントを使用します。

StreamRequest - VODStreamRequest または LiveStreamRequest: ストリームリクエストを定義するオブジェクト。ストリームリクエストは、ビデオオンデマンドまたはライブストリームのいずれかです。リクエストでは、Content ID、API キー、認証トークン、その他のパラメータを指定します。
StreamManager: ダイナミック広告挿入ストリームと DAI バックエンドとのやり取りを処理するオブジェクト。ストリームマネージャーは ping をトラッキングし、ストリームイベントと広告イベントをパブリッシャーに転送します。

Prerequisites

始める前に、次のものが必要になります。

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

1. 開発用サーバーの起動

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

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

他のウェブサーバー（Apache HTTP Server など）も使用できます。

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

まず、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'

// Live stream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2528370";
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');
}

3.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>

...

4. StreamManager を初期化し、ストリームリクエストを行う。

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

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

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);
}

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

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

また、動画要素の pause イベントと start イベントに対してイベントリスナーを設定して、ユーザーが広告ブレーク中に IMA を一時停止したときに再生を再開できるようにすることもできます。

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 の概要

Prerequisites

1. 開発用サーバーの起動

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

3.IMA SDK を読み込む

4. StreamManager を初期化し、ストリーム リクエストを行う。

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

4. StreamManager を初期化し、ストリームリクエストを行う。

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