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

IMA DAI SDK スタートガイド

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

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

連続広告配信 DAI

このガイドでは、ライブまたは VOD 向けに DAI Pod Serving ストリームを再生する方法について説明します。 hls.js に依存する動画プレーヤーで HTML5 向け IMA DAI SDK を使用して、コンテンツを作成します。作成します。完成したサンプルを表示または HLS.js と Safari 再生の両方をサポートする、 HLS の広告連続配信の例 DASH.js のサポートについては、DASH 連続配信広告の例をご覧ください。これらのサンプルアプリは、HTML5 DAI GitHub リリースからダウンロードできます。ページをご覧ください。

DAI Pod Serving の概要

IMA DAI SDK を使用して連続広告配信を実装するには、主に 2 つのコンポーネントがあります。このガイドで説明します。

PodStreamRequest / PodVodStreamRequest: 送信先のストリームリクエストを定義するオブジェクト。 Google の広告サーバー。リクエストではネットワークコードが指定され、 PodStreamRequest にはカスタムアセットキーも必要です。 API キー。どちらにも他のオプションパラメータが含まれています。
StreamManager: 動画ストリームと IMA DAI SDK（トラッキング ping の発行やストリームイベントをパブリッシャーに転送できます。

前提条件

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

3 つの空のファイル:
- dai.html
- dai.css
- dai.js
コンピュータ、ウェブサーバー、その他のホストされた開発環境にインストールされている Python テストに使用する環境

開発環境を構成する

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

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

Compute Engine など、ホストされた他の開発環境やウェブサーバーを使用することもできます。 Apache HTTP Server として動作します。

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

まず、dai.html を変更してシンプルな HTML5 動画要素と div 要素を作成します。広告 UI 要素に使用します。また、dai.css を読み込むために必要なタグを追加します。と dai.js ファイルを設定し、hls.js 動画プレーヤーをインポートしてください。

次に、dai.css を修正してページ要素のサイズと位置を指定します。最後に、dai.js で、ストリームリクエスト情報を保持する変数を定義します。ページの読み込み時に実行する initPlayer() 関数を追加します。

ストリームリクエストの定数は次のとおりです。

BACKUP_STREAM: 広告処理時に再生される代替ストリームの URL 致命的なエラーが発生します
STREAM_URL: ライブ配信でのみ使用。連続配信広告を使ってマニフェストマニピュレータやパートナー事業者が本来は IMA DAI SDK で提供されるストリーム ID を挿入してから、リクエストできます。ストリーム URL にはプレースホルダが含まれており、 [[STREAMID]] は、リクエストを行う前にストリーム ID に置き換えられます。
NETWORK_CODE: アドマネージャー 360 アカウントのネットワークコード。
CUSTOM_ASSET_KEY: ライブ配信でのみ使用。カスタムアセットキーがはアドマネージャー 360 で連続配信広告の配信イベントを識別します。これを作成するには、サードパーティの連続配信広告パートナーに依頼する必要はありません
API_KEY: ライブ配信でのみ使用。オプションの API キー。 IMA DAI SDK からストリーム ID を取得するために必要です。

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 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'

// Stream Config.
const STREAM_URL = "https://encodersim.sandbox.google.com/masterPlaylist/...&stream_id=[[STREAMID]]";
const NETWORK_CODE = "51636543";
const CUSTOM_ASSET_KEY = "google-sample";
const API_KEY = "";

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

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

IMA DAI SDK を読み込む

次に、dai.html のスクリプトタグを使って DAI フレームワークをタグの前に追加します。 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 を初期化してライブストリームまたは VOD ストリームストリームをリクエストする

ライブ配信の連続配信広告

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

次に、ライブ配信を提供する連続配信広告をリクエストする関数を定義します。この関数まず PodStreamRequest を作成し、streamRequest で構成します。パラメータを渡してから streamManager.requestStream() を呼び出す関連付けられます。

dai.js

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

  requestLivePodStream(NETWORK_CODE, CUSTOM_ASSET_KEY, API_KEY);
}

function requestLivePodStream(networkCode, customAssetKey, apiKey) {
  // clear HLS.js instance, if in use
  if (hls) {
    hls.destroy();
  }

  // Generate a Pod Serving live Stream Request
  const streamRequest = new google.ima.dai.api.PodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.apiKey = apiKey;
  streamRequest.format = 'hls';
  streamManager.requestStream(streamRequest);
}

VOD 連続配信広告

次に、VOD ストリームを提供する連続配信広告をリクエストする関数を定義します。この関数まず PodVodStreamRequest を作成し、streamRequest で構成します。パラメータを渡してから streamManager.requestStream() を呼び出す関連付けられます。

dai.js

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

  requestVodPodStream(NETWORK_CODE);
}

function requestVodPodStream(networkCode) {
  // clear HLS.js instance, if in use
  if (hls) {
    hls.destroy();
  }

  // Generate a Pod Serving VOD Stream Request
  const streamRequest = new google.ima.dai.api.PodVodStreamRequest();
  streamRequest.networkCode = networkCode;
  streamRequest.format = 'hls';
  streamManager.requestStream(streamRequest);
}

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

ライブ配信の連続配信広告

次に、主要な動画イベントのイベントリスナーを実装します。この例では、 STREAM_INITIALIZED、ERROR、AD_BREAK_STARTED、AD_BREAK_ENDED onStreamEvent() 関数を呼び出して、イベントを視覚化できます。この関数はストリームを広告が再生されている間はプレーヤーコントロールを無効にしたり、必要があります。ストリームが読み込まれると、動画がプレーヤーが、loadStream() 関数を使用して、指定された URL を読み込んで再生します。

dai.js

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  
  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED,
    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.STREAM_INITIALIZED:
      console.log('Stream initialized');
      loadStream(e.getStreamData().streamId);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadStream('');
      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 loadStream(streamID) {
  var url;
  if(streamID) {
    url = STREAM_URL.replace('[[STREAMID]]', streamID);
  } else {
    console.log('Stream Initialization Failed');
    url = BACKUP_STREAM;
  }
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
}

VOD 連続配信広告

次に、主要な動画イベントのイベントリスナーを実装します。この例では、 STREAM_INITIALIZED、LOADED、ERROR、AD_BREAK_STARTED、 onStreamEvent() 関数を呼び出して AD_BREAK_ENDED イベントを作成します。このストリームの読み込みとエラーを処理し、プレーヤーを無効にします。これは、SDK で要求されている広告再生中のコントロールです。

また、VOD 連続配信ストリームでは、次のレスポンスに対する StreamManager.loadStreamMetadata(): STREAM_INITIALIZED イベント。また、ストリーミングの URL を動画技術パートナー（VTP）です。loadStreamMetadata() の呼び出しが成功したら LOADED イベントがトリガーされ、ここで loadStream() 関数が呼び出されます。をストリーム URL に置き換えて、ストリームの読み込みと再生を行います。

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  
  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED,
    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.STREAM_INITIALIZED:
      const streamId = e.getStreamData().streamId;
      // 'vtpInterface' is a place holder for your own video technology
      //  partner (VTP) API calls.
      vtpInterface.requestStreamURL({
        'streamId': streamId,
      })
      .then( (vtpStreamUrl) => {
        streamUrl = vtpStreamUrl;
        streamManager.loadStreamMetadata();
      }, (error) => {
        // Handle the error.
      });
      break;
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      loadStream(streamUrl);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadStream();
      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 loadStream(url) {
  if(url) {
    console.log('Loading:' + url);
    hls.loadSource(url);
  } else {
    console.log('Stream Initialization Failed');
    hls.loadSource(BACKUP_STREAM);
  }
  hls.attachMedia(videoElement);
}

ストリームメタデータを処理する

このステップでは、メタデータのイベントリスナーを実装して、発生します。インストリームメタデータイベントのリッスン方法は、ストリーム形式（HLS または DASH）、ストリームタイプ（ライブまたは VOD ストリーム）、使用している DAI バックエンドのタイプなどです詳しくは、メタデータガイドをご覧ください。

HLS ストリーム形式（ライブストリームと VOD ストリーム、HLS.js プレーヤー）

HLS.js プレーヤーを使用している場合は、以下をリッスンします。 HLS.js の FRAG_PARSING_METADATA イベントを使用して ID3 メタデータを取得し、 SDK と StreamManager.processMetadata()。

すべてが読み込まれて準備が整ってから自動的に動画を再生するには、以下の曲を聴きます。 HLS.js の MANIFEST_PARSED イベントを呼び出して、再生をトリガーします。

function loadStream(streamID) {
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  
  // Timed metadata is passed HLS stream events to the streamManager.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, parseID3Events);
  hls.on(Hls.Events.MANIFEST_PARSED, startPlayback);
}

function parseID3Events(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((sample) => {
      streamManager.processMetadata('ID3', sample.data, sample.pts);
    });
  }
}

function startPlayback() {
  console.log('Video Play');
  videoElement.play();
}

DASH.js（DASH ストリーム形式、ライブおよび VOD ストリームタイプ）

DASH.js プレーヤーを使用している場合、ライブや VOD で ID3 メタデータをリッスンするには、異なる文字列を使用する必要があります。ストリーム:

ライブ配信: 'https://developer.apple.com/streaming/emsg-id3'
VOD ストリーム: 'urn:google:dai:2018'

StreamManager.processMetadata() を使用して、ID3 メタデータを SDK に渡します。

すべてが読み込まれて準備が整ってから動画コントロールを自動的に表示するには、 DASH.js の MANIFEST_LOADED イベントをリッスンします。

const googleLiveSchema = 'https://developer.apple.com/streaming/emsg-id3';
const googleVodSchema = 'urn:google:dai:2018';
dashPlayer.on(googleLiveSchema, processMetadata);
dashPlayer.on(googleVodSchema, processMetadata);
dashPlayer.on(dashjs.MediaPlayer.events.MANIFEST_LOADED, loadlistener);

function processMetadata(metadataEvent) {
  const messageData = metadataEvent.event.messageData;
  const timestamp = metadataEvent.event.calculatedPresentationTime;

  // Use StreamManager.processMetadata() if your video player provides raw
  // ID3 tags, as with dash.js.
  streamManager.processMetadata('ID3', messageData, timestamp);
}

function loadlistener() {
  showControls();

  // This listener must be removed, otherwise it triggers as addional
  // manifests are loaded. The manifest is loaded once for the content,
  // but additional manifests are loaded for upcoming ad breaks.
  dashPlayer.off(dashjs.MediaPlayer.events.MANIFEST_LOADED, loadlistener);
}

ライブ配信を含む Shaka Player（DASH ストリーム形式）

Shaka プレーヤーをライブストリーム再生では、文字列 'emsg' を使用してメタデータイベントをリッスンします。次に、StreamManager.onTimedMetadata() の呼び出しでイベントメッセージのデータを使用します。

shakaPlayer.addEventListener('emsg', (event) => onEmsgEvent(event));

function onEmsgEvent(metadataEvent) {
  // Use StreamManager.onTimedMetadata() if your video player provides
  // processed metadata, as with Shaka player livestreams.
  streamManager.onTimedMetadata({'TXXX': metadataEvent.detail.messageData});
}

VOD ストリームを使用する Shaka プレーヤー（DASH ストリーム形式）

Shaka プレーヤーを VOD ストリームの再生。文字列 'timelineregionenter' を使用してリッスンします。提供します。次に、そのイベントメッセージのデータを使用して StreamManager.processMetadata() 文字列 'urn:google:dai:2018' に置き換えます。

shakaPlayer.addEventListener('timelineregionenter', (event) => onTimelineEvent(event));

function onTimelineEvent(metadataEvent) {
  const detail = metadataEvent.detail;
  if ( detail.eventElement.attributes &&
       detail.eventElement.attributes['messageData'] &&
       detail.eventElement.attributes['messageData'].value ) {
        const mediaId = detail.eventElement.attributes['messageData'].value;
        const pts = detail.startTime;
        // Use StreamManager.processMetadata() if your video player provides raw
        // ID3 tags, as with Shaka player VOD streams.
        streamManager.processMetadata('urn:google:dai:2018', mediaId, pts);
       }
}

プレーヤーイベントを処理する

動画要素の pause イベントと start イベントにイベントリスナーを追加して、ミッドロール挿入点で SDK が一時停止したときに再生を再開するようユーザーに指示する。

function loadStream(streamUrl) {
  ...
  
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);
}

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

これで、「連続配信広告」ストリームで広告をリクエストして表示し、 HTML5 向け IMA DAI SDKより高度な SDK 機能について詳しくは、他のガイドやサンプルを GitHub

IMA DAI SDK スタートガイド

連続広告配信 DAI

DAI Pod Serving の概要

前提条件

開発環境を構成する

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

dai.html

dai.css

dai.js

IMA DAI SDK を読み込む

dai.html

StreamManager を初期化してライブ ストリームまたは VOD ストリーム ストリームをリクエストする

ライブ配信の連続配信広告

dai.js

VOD 連続配信広告

dai.js

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

ライブ配信の連続配信広告

dai.js

VOD 連続配信広告

ストリーム メタデータを処理する

HLS ストリーム形式（ライブ ストリームと VOD ストリーム、HLS.js プレーヤー）

DASH.js（DASH ストリーム形式、ライブおよび VOD ストリーム タイプ）

ライブ配信を含む Shaka Player（DASH ストリーム形式）

VOD ストリームを使用する Shaka プレーヤー（DASH ストリーム形式）

プレーヤー イベントを処理する

StreamManager を初期化してライブストリームまたは VOD ストリームストリームをリクエストする

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

ストリームメタデータを処理する

HLS ストリーム形式（ライブストリームと VOD ストリーム、HLS.js プレーヤー）

DASH.js（DASH ストリーム形式、ライブおよび VOD ストリームタイプ）

プレーヤーイベントを処理する