このページは 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: ストリームリクエストを定義するオブジェクト。ストリームリクエストは、ビデオオンデマンドまたはライブストリームのいずれかになります。リクエストには、コンテンツ ID のほか、API キーまたは認証トークンなどのパラメータを指定します。
StreamManager: ダイナミック広告挿入ストリームと DAI バックエンドとのやり取りを処理するオブジェクト。また、ストリームマネージャーはトラッキング ping を処理し、ストリームと広告のイベントをパブリッシャーに転送します。

前提条件

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

空のファイル: 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 の script タグを使用して、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 を初期化してストリームリクエストを行う

一連の広告をリクエストするには、DAI ストリームのリクエストと管理を行う ima.dai.api.StreamManager を作成します。コンストラクタは動画要素を受け取り、生成されたインスタンスは広告クリックを処理するための広告 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 の概要

前提条件

1. 開発サーバーを起動する

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

3. IMA SDK を読み込む

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

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

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

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