リニア 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 ストリームでは、メタデータを含むイベント ストリームのマニフェスト イベントとしてメタデータが カスタムの schemeIdUriurn: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);
       }
}