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

リニア DAI ストリームで時間指定メタデータを処理する

Interactive Media Ads（IMA）ダイナミック広告挿入（DAI）SDK は、ストリームのメディアセグメントに埋め込まれたメタデータ情報（インバンドメタデータ）ストリーミングマニフェストファイル（マニフェスト内のメタデータ）で閲覧者のアクションを追跡することで、クライアントサイドの広告イベントを測定しています。メタデータはさまざまな形式で動画の長さに応じて変わります。

動画プレーヤーは、時間指定のメタデータを一括して受け取ります。プレーヤーによっては、スケジュールされた時刻に、またはバッチで表示できます。各メタデータ文字列にプレゼンテーションタイムスタンプ（PTS）が関連付けられています。トリガーされます。

メタデータを取得して IMA DAI SDK に転送する作業は、アプリ側で行います。SDK には、この情報を渡すための次のメソッドが用意されています。

onTimedMetadata

このメソッドは、処理できる状態にあるメタデータ文字列をできます。引数は 1 つだけです。

metadata: TXXX のキーと関連する文字列を含むオブジェクト値の先頭に google_ が付加されます。

processMetadata

このメソッドは、SDK がメタデータ文字列を処理するできます。次の引数を取ります。

type: 処理するイベントのタイプを含む文字列。承諾済み値は ID3（HLS の場合）または urn:google:dai:2018（DASH の場合）
data: 接頭辞が google_ の文字列値か、次のバイト配列この形式に従う ID3:u\0004u\000u\000u\0000TXXXu\0004u\000u\000u\0000google_xxxxxxxx。
timestamp: データを処理するタイムスタンプ（秒単位）。

IMA DAI SDK がサポートしている各ストリームタイプでは、それぞれ固有の時間フォーマットが使用されます。メタデータを指定します。

HLS MPEG2TS ストリーム

MPEG2TS セグメントを使用したリニア DAI HLS ストリームは、時間指定されたメタデータをインバンド ID3 タグを介して動画プレーヤーと通信しますこれらの ID3 タグは MPEG2TS セグメントが適用され、TXXX フィールド名（カスタムのユーザー定義のテキストの場合）ができます。

Safari で再生

Safari は ID3 タグを自動的に非表示トラックとして処理するため、cuechange イベントは各メタデータを処理するために適切な時刻に起動されます。問題がなくてもすべてのメタデータを IMA DAI SDK に送信できる必要があります。関連性が低い自動的に除外されます。

次の例をご覧ください。

videoElement.textTracks.addEventListener('addtrack', (e) => {
  const track = e.track;
  if (track.kind === 'metadata') {
    track.mode = 'hidden';
    track.addEventListener('cuechange', () => {
      for (const cue of track.activeCues) {
        const metadata = {};
        metadata[cue.value.key] = cue.value.data;
        streamManager.onTimedMetadata(metadata);
      }
    });
  }
});
...

HLS.js

HLS.js は、FRAG_PARSING_METADATA イベントを通じて ID3 タグを一括して提供します。サンプルの配列として格納されます。HLS.js でバイト配列の ID3 データが変換されないイベントを対応する PTS にオフセットしません。そうではないサンプルデータをバイト配列から文字列にデコードしたり、（IMA DAI SDK がこのデコードとフィルタリングを行うため）自動的に適用されます。

次の例をご覧ください。

hls.on(Hls.Events.FRAG_PARSING_METADATA, (e, data) => {
  if (streamManager && data) {
    data.samples.forEach((sample) => {
      streamManager.processMetadata('ID3', sample.data, sample.pts);
    });
  }
});
...

HLS CMAF ストリーム

Common Media Application Framework（CMAF）パスを使用したリニア DAI HLS ストリーム ID3 ～ CMAF 標準。これらの eMSG ボックスは各メディアセグメントの先頭に埋め込まれます。各 ID3 eMSG には、ストリームの最後の中断を基準とする PTS。

HLS.js 1.2.0 リリース時点では、推奨するプレーヤーは両方とも ID3 に合格しています。 CMAF でユーザーに配信されますこのため、 HLS MPEG2TS ストリームの場合と同じです。ただし、すべてのプレーヤーには当てはまるわけではないため、HLS CMAF のサポートを実装する。ストリームには、eMSG を通じて ID3 を解析する一意のコードが必要になる場合があります。

Safari で再生

Safari は、eMSG メタデータを通じて ID3 を疑似 ID3 イベントとして扱い、非表示のトラックとして自動的に作成されます。たとえば、cuechange イベントは各メタデータを処理します。大丈夫タイミングに関連するかどうかにかかわらず、すべてのメタデータを IMA DAI SDK に渡す制限なし DAI に関連しないメタデータは自動的に除外されます。

次の例をご覧ください。

videoElement.textTracks.addEventListener('addtrack', (e) => {
  const track = e.track;
  if (track.kind === 'metadata') {
    track.mode = 'hidden';
    track.addEventListener('cuechange', () => {
      for (const cue of track.activeCues) {
        const metadata = {};
        metadata[cue.value.key] = cue.value.data;
        streamManager.onTimedMetadata(metadata);
      }
    });
  }
});
...

HLS.js

バージョン 1.2.0 以降、HLS.js は eMSG メタデータを通じて ID3 を疑似 ID3 として扱います。 FRAG_PARSING_METADATA イベントを介してバッチで提供します。サンプルの配列として格納されます。HLS.js がバイト配列の ID3 データを変換しないイベントを対応する PTS にオフセットしません。そうではない必要となります。これは、IMA DAI SDK が自動的にデコードを行うため、バイト配列から文字列にサンプルデータをデコードします。

次の例をご覧ください。

hls.on(Hls.Events.FRAG_PARSING_METADATA, (e, data) => {
  if (streamManager && data) {
    data.samples.forEach((sample) => {
      streamManager.processMetadata('ID3', sample.data, sample.pts);
    });
  }
});
...

DASH ストリーム

リニア DAI DASH ストリームでは、メタデータを含むイベントストリームのマニフェストイベントとしてメタデータがカスタムの schemeIdUri 値 urn:google:dai:2018。これらの各イベントはストリームにはテキストペイロード、PTS が含まれます。

DASH.js

Dash.js は、それぞれの schemeIdUri 値に基づいた名前のカスタムイベントハンドラを提供します。使用します。これらのカスタムハンドラは一括で起動し、イベント時間を適切に計測するために PTS 値を処理します。IMA DAI SDK で StreamManager メソッド processMetadata() を使用します。

次の例をご覧ください。

const dash = dashjs.MediaPlayer().create();
dash.on('urn:google:dai:2018', (payload) => {
  const mediaId = payload.event.messageData;
  const pts = payload.event.calculatedPresentationTime;
  streamManager.processMetadata('urn:google:dai:2018', mediaId, pts);
});
...

Shaka Player

Shaka Player が timelineregionenter イベントの一部としてイベントを表示します。期限 Shaka Player の形式に互換性がない場合、メタデータ値は detail プロパティを使用して eventElement.attributes['messageData'].value。

次の例をご覧ください。

player.addEventListener('timelineregionenter', function(event) {
  const detail = event.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;
    streamManager.processMetadata("urn:google:dai:2018", mediaId, pts);
  }
});
...

連続配信広告

Pod によるサービス提供では、時間指定で渡すためのさまざまな構成がある次の条件に応じて異なります。

ライブまたは VOD の配信タイプ
HLS または DASH ストリーム形式
使用されているプレーヤーのタイプ
使用している 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);
       }
}

リニア DAI ストリームで時間指定メタデータを処理する

HLS MPEG2TS ストリーム

Safari で再生

HLS.js

HLS CMAF ストリーム

Safari で再生

HLS.js

DASH ストリーム

DASH.js

Shaka Player

連続配信広告

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

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

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

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

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

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