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

IMA DAI SDK スタートガイド

IMA SDK を使用すると、ウェブサイトやアプリにマルチメディア広告を簡単に統合できます。IMA SDK は任意のネットワークから広告をリクエストし、 <ph type="x-smartling-placeholder"></ph> VAST 準拠の広告サーバーを実装し、アプリでの広告再生を管理できます。IMA DAI SDK を使用すると、広告およびコンテンツ動画（VOD またはライブコンテンツ）のストリームリクエスト。すると、SDK は統合動画ストリームであるため、広告とコンテンツ動画の切り替えを管理する手間が省けます。確認できます。

ご希望の DAI ソリューションを選択する

フルサービス DAI

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

IMA DAI の概要

IMA DAI SDK の実装には、2 つの主要コンポーネントが含まれます（本書:

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

前提条件

空のファイルが 3 つある <ph type="x-smartling-placeholder">
- 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);
}

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

最後に、主要な動画イベントのイベントリスナーを実装します。このシンプルな例では、LOADED、ERROR、AD_BREAK_STARTED、 onStreamEvent() 関数を呼び出して 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 を初期化してストリームリクエストを行う

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