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

IMA DAI SDK スタートガイド

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

関心のある DAI ソリューションを選択する

フルサービス DAI

このガイドでは、IMA DAI SDK をシンプルな動画に統合する方法を説明します。プレーヤーアプリ。完成したサンプルを表示またはダウンロードしてください。簡単な例をご覧ください。

IMA DAI の概要

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

StreamRequest - VODStreamRequest または LiveStreamRequest: ストリームリクエストを定義するオブジェクト。ストリーミングリクエストはビデオオンデマンドまたはライブ使用できます。リクエストでは、Content ID、API キーまたは認証トークン、あります。
StreamManager: ダイナミック広告挿入のストリームと DAI バックエンドとのインタラクションを処理するオブジェクト。ストリームマネージャーは、トラッキングピングも処理し、ストリームイベントと広告イベントをパブリッシャーに転送します。

前提条件

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

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

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

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

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

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

まず、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 DAI 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 DAI SDK を読み込む

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

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 を初期化してストリームリクエストを実行する

広告のセットをリクエストするには、ima.dai.api.StreamManager を作成します。 DAI ストリームのリクエストと管理を担当します。コンストラクタは生成されたインスタンスは、広告を処理する広告 UI 要素を受け取ります。できます。

次に、ストリームをリクエストする関数を定義します。この例には、次の関数が含まれています。 VOD とライブ配信の両方（VODStreamRequest と LiveStreamRequest を呼び出してから、streamManager.requestStream() を呼び出します。 streamRequest パラメータに置き換えます。ライブ配信の場合は、タイムドメタデータイベントをリッスンしてイベントを 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 DAI 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 DAI SDK を使用して広告をリクエストして表示できるようになりました。SDK の高度な機能については、他のガイドまたは GitHub のサンプルをご覧ください。

IMA DAI SDK スタートガイド

フルサービス DAI

IMA DAI の概要

前提条件

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

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

IMA DAI SDK を読み込む

StreamManager を初期化してストリーム リクエストを実行する

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

StreamManager を初期化してストリームリクエストを実行する

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