ミッドロール挿入点

概要

Web Receiver SDK はミッドロール挿入点とコンパニオン広告のネイティブ サポートを備えている 特定のメディアストリーム内に配置されます広告の配置、広告のソース、 広告ブレークとそれに関連するブレーククリップの 動作を追跡できますこのガイドでは、 Break 1 つ以上の広告またはバンパーを含む再生の間隔を 個々の広告またはバンパーは BreakClip。 これらの挿入点は、読み込み中または再生中のメディアに関連付けられています。

広告の種類

Web Receiver SDK はクライアントサイド広告挿入（CSAI）とサーバーをサポート 組み合わされた広告挿入（SSAI）。クライアント合成の広告は、 VAST や VMAP のテンプレート ファイルから抽出したデータのみを使用します。 サーバー合成広告は、コンテンツが読み込まれる前に手動で指定する必要があります。 埋め込み広告、または埋め込みエキスパンドとしてコンテンツ再生中に動的に できます。各広告タイプの実装について、以下で詳しく説明します。

// Create the BreakClip.
let clipClient = new cast.framework.messages.BreakClip('bc_client');
clipClient.title = 'The Ad Title to be displayed during playback';
clipClient.contentId = 'https://example.com/ad.m3u8';
clipClient.contentType = 'application/vnd.apple.mpegurl';

// Optional: Used when HLS ad container formats differ from the main content's.
clipClient.hlsSegmentFormat = cast.framework.messages.HlsSegmentFormat.FMP4;

// Create the Break using the BreakClip id above.
let breakPostrollClient = new cast.framework.messages.Break(
    'break_postroll_client', ['bc_client'], -1);
breakPostrollClient.isEmbedded = false; // Optional: default is false.
breakPostrollClient.expanded = false; // Optional: default is false.

// Create the VastAdsRequest.
let vastTemplate = new cast.framework.messages.VastAdsRequest();
vastTemplate.adTagUrl = 'https://example.com/ads.xml'

// Create the BreakClip.
let clipVast = new cast.framework.messages.BreakClip('bc_vast');
clipVast.vastAdsRequest = vastTemplate;

// Create the Break using the BreakClip id above.
let breakPostrollVast = new cast.framework.messages.Break(
    'break_postroll_vast', ['bc_vast'], -1);
breakPostrollVast.isEmbedded = false; // Optional: default is false.
breakPostrollVast.expanded = false; // Optional: default is false.

"breaks": [
  {
    "id": "break_postroll_vast",
    "breakClipIds": [
      "bc_vast"
    ],
    "position": 0,
    "isWatched": false
  }
],
"breakClips": [
  {
    "id": "bc_vast"
  }
]

"breaks": [
  {
    "id": "break_postroll_vast",
    "breakClipIds": [
      "GENERATED:0"
    ],
    "position": 0,
    "isWatched": true
  }
],
"breakClips": [
  {
    "id": "bc_vast"
  },
  {
    "id": "GENERATED:0",
    "contentId": "https://example.com/break-clip-1.mpd",
    "contentType": "application/dash+xml",
    "title": "Ad Title Extracted from Template",
    "duration": 10,
    "whenSkippable": 5,
    "clickThroughUrl": "https://example.com/ad-target"
  }
]

// Create the VastAdsRequest.
let vastTemplate = new cast.framework.messages.VastAdsRequest();
vastTemplate.adTagUrl = 'https://example.com/vmap.xml'

// Add it to the MediaInformation of the LoadRequest.
loadRequestData.media.vmapAdsRequest = vastTemplate;

// Create the BreakClip.
let clipEmbedded = new cast.framework.messages.BreakClip('bc_embedded');
clipEmbedded.title = 'The Ad Title to be displayed during playback';
clipEmbedded.duration = 15;

// Create the Break using the BreakClip id above.
let breakPrerollEmbedded = new cast.framework.messages.Break(
    'break_preroll_embedded', ['bc_embedded'], 0);
breakPrerollEmbedded.isEmbedded = true;
breakPrerollEmbedded.expanded = false; // Optional: default is false.

// Create the BreakClip.
let clipEmbeddedExpanded =
    new cast.framework.messages.BreakClip('bc_embedded_expanded');
clipEmbeddedExpanded.title = 'The Ad Title to be displayed during playback';
clipEmbeddedExpanded.duration = 15;

// Create the Break using the BreakClip id above.
let breakPrerollEmbeddedExpanded = new cast.framework.messages.Break(
    'break_preroll_embedded_expanded', ['bc_embedded_expanded'], 0);
breakPrerollEmbeddedExpanded.isEmbedded = true;
breakPrerollEmbeddedExpanded.expanded = true;

プレーヤーのタイムラインの種類

Web Receiver SDK は、プレーヤー インスタンスを作成する際に、 コンテンツの再生中の広告再生をサポートする。タイムラインごとに広告が 追加できます。タイムライン タイプは、 広告の読み込み中に表示される広告タイプ MediaInformation LoadRequestData。 埋め込みのミッドロール挿入点がある場合は、embedded タイムラインが選択されます。条件 クライアント合成のミッドロール挿入点がある場合は、stitched タイムラインが選択されています。 広告が存在しない場合、SDK はデフォルトで embedded を使用します。 タイムラインが表示されます。タイムラインは、一度選択すると、現在のタイムラインでは変更できなくなります。 指定します。以下の表に、各タイムラインの詳細を示します。

以下の図 1 ～ 3 は、さまざまな広告タイプを含むコンテンツと、 表示されます。コンテンツにプレロールの挿入点が設定されています。 2 つの挿入点クリップと、ミッドロールおよびポストロールの挿入点を含む 作成します。コンテンツの再生を開始してからの実経過時間。 メイン コンテンツのメディア時間と、現在の休憩時間 各図形の下に配置されます。

</ph> <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

挿入点の位置

Web Receiver SDK でミッドロール挿入点の場所をデベロッパーが指定可能 「新規顧客の獲得」目標を position プロパティBreak。この値は、メイン コンテンツのメディア時間に対応します。 pre-roll、mid-roll、post-roll のミッドロール挿入点を作成できます。 定義は次のとおりです。

相互運用性マトリックス

参考までに、表 1 に広告タイプの概要と 広告関連の機能に対応しているかどうか

イベント

キーブレーク イベントが発生すると、Cast SDK はタイプのイベントをディスパッチする BreaksEvent。 レシーバアプリは、PlayerManager を使用してサブスクライブできます。 addEventListener API

これらのイベントは、分析と広告再生トラッキングに使用できます。VMAP の場合 （Video Multiple Ad Playlist）広告と VAST（Video Ad Serving Template）広告は、 レスポンスに含まれる標準のトラッキング イベントは自動的に 自動的に配信されます。

表 2 にイベントタイプと詳細な説明を示します。 発生します。

</ph>

広告の挿入

Cast SDK を使用すると、さまざまなタイミングでアプリの広告を挿入したり削除したりできます。 キャストセッションの情報です広告挿入には、静的広告と動的の 2 種類があります。 静的広告挿入では、 LoadRequestData プレーヤーが作成されます。ダイナミック広告挿入では、 BreakManager addBreak すでに読み込まれているコンテンツに休憩を挿入する API。挿入のタイプ メソッドは特定の広告タイプに対応しています。互換性 概要については、相互運用性マトリックスをご覧ください。

静的広告挿入

静的広告挿入の特徴は、関連する広告メタデータを プレーヤーの作成に時間と労力を費やします。この情報は MediaInformation （LoadRequestData のもの）。たとえば、接続されている送信者の または Web Receiver アプリケーションによって挿入できます。 LOAD リクエストのインターセプト。LoadRequestData がインスタンスに返されると、 Web Receiver SDK の処理が完了すると、プレーヤーが作成されます。詳細を見る メディアの読み込み。サンプル 以下は、LOAD リクエストに追加される手動のクライアント合成の広告を示しています。 使用します。

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {

  // Create the BreakClip.
  let clipClient = new cast.framework.messages.BreakClip('bc_client');
  clipClient.title = 'The Ad Title to be displayed during playback';
  clipClient.contentId = 'https://example.com/ad.mp4';
  clipClient.contentType = 'video/mp4';

  // Create the Break using the BreakClip id above.
  let breakPostrollClient = new cast.framework.messages.Break(
      'break_postroll_client', ['bc_client'], -1);

  // Set the ad information in the load request data.
  let media = loadRequestData.media;
  media.breakClips = [clipClient];
  media.breaks = [breakPostrollClient];

  return loadRequestData;
});

ダイナミック広告挿入

ダイナミック広告挿入の特徴は、コンテンツ中にミッドロール挿入点を設定することです。 おすすめします。これを行うには、BreakManager のインスタンスを取得し、 addBreak APIこれには少なくとも 2 つのパラメータ、 埋め込みのエキスパンド Break、 配列 BreakClip。 オプションの 3 つ目のプロパティが含まれており、これを使用して変更を true に設定すると、MediaStatus ブロードキャストを介して接続されている送信者。日時 ブレークやブレーク クリップを追加する場合、対応する ID は一意である必要があります。これらの広告 プレーヤーの作成後にのみ追加できます。Web Receiver SDK が PLAYER_LOADING イベントがトリガーされます。以下のサンプルで、 ストリームの ID3 メタデータの変更に応答するイベント ハンドラ Break オブジェクトと BreakClip オブジェクトを作成してタイムラインに挿入します。

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
const breakManager = playerManager.getBreakManager();

playerManager.addEventListener(cast.framework.events.EventType.ID3, (event) => {

  // Create the BreakClip.
  let clipEmbeddedExpanded = parseBreakClipFromData(event.segmentData);
  let breakEmbeddedExpanded = parseExpandedBreakFromData(event.segmentData);

  // Add the break and break clip.
  breakManager.addBreak(breakEmbeddedExpanded, [clipEmbeddedExpanded]);
});

動的広告の削除

動的な挿入点を削除するには、アプリケーションで removeBreakById 。この関数は、変更するブレークの文字列識別子を タイムラインから削除されます。指定された breakId は、埋め込まれた 展開されたミッドロール挿入点。他のタイプのミッドロール挿入点が検出されると、 タイムラインに残ります。挿入点を削除する以下のサンプルをご覧ください。

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
const breakManager = playerManager.getBreakManager();

breakManager.removeBreakById('break_midroll_embedded_expanded');

挿入点の動作

SDK が、プレーヤーが休憩に出入りしたときのデフォルトの動作を定義している 用意されているいくつかの API を使用して さらにカスタマイズすることもできます BreakManager。

デフォルトの区切り動作

通常の再生または Break の位置でシークして Break に入ると、 SDK はユーザーがそのコンテンツを見たかどうかを、 isWatched プロパティです。作成された場合、このプロパティのブレークのデフォルト値は false です。条件 プロパティが true の場合、入ってメインでブレークは再生されません。 コンテンツは引き続き再生されます。プロパティが false の場合、挿入点は 入力すると再生されます。

過去のブレークをシークする場合、デフォルトの実装はすべての Break を取得します。 position がシーク操作の seekFrom および seekTo 使用できます。この挿入点のリストから、SDK は position を持つ Break を再生します。 seekTo 値に最も近い isWatched プロパティが false。そのブレークの isWatched プロパティは true に設定され、 再生が開始されます。休憩後 メイン コンテンツは seekTo の位置から再生を再開します。「いいえ」の場合: ブレークがある場合は、ブレークは再生されず、メイン コンテンツが再開します。 seekTo の位置で再生しています。

休憩の再生中に、SDK は接続済みの 送信側のアプリケーションを MediaStatus。 これらのアプリは、ブロードキャストを使用し、次のように読み取り、広告の UI を更新します。 breakStatus プロパティです。このプロパティは、ブレーク再生中にのみ定義されます。

また、受信側のアプリケーションは、 BreakClip の現在の時刻に対するプレイヘッドの位置 PlayerManager を呼び出して表示できます getBreakClipCurrentTimeSec。 同様に、アプリケーションは現在の BreakClip の期間を以下でクエリできます。 通話中 getBreakClipDurationSec。

カスタムブレーク動作

デフォルトの動作 編集するには、 setBreakClipLoadInterceptor および setBreakSeekInterceptor メソッド（BreakManager で指定）

シーク インターセプタを中断

ブレーク シーク インターセプタを使用すると、アプリでシークの動作を制御できる オーバーライドできますシーク操作がリクエストされると関数がトリガーされる 1 回以上の挿入点をまたいで前後に移動します。呼び出されると、 BreakSeekData コールバック関数にパラメータとして渡されます。BreakSeekData オブジェクト 配列を含む Break position プロパティが プレイヘッド時間は seekFrom シークのデスティネーション時間は seekTo を選択します。

このインターセプタを使用すると、それぞれのブレークで Break オブジェクトを あります。実装時にブレーク シーク インターセプタでは、 オプションで変更可能な BreakSeekData オブジェクトを返して再生する区切り。「 プレーヤーは、戻り値に含まれるすべての中断を再生します。値が null であるか、ブレーク シーク インターセプタから何も返されない場合、ブレークは スキップされます

インターセプタの簡単な実装については、以下のサンプルをご覧ください。 は、デフォルトの動作をオーバーライドして、 視聴済みの挿入点を除きます

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
const breakManager = playerManager.getBreakManager();

breakManager.setBreakSeekInterceptor((breakSeekData) => {

  // Filter the breaks array by removing watched breaks.
  const unwatchedBreaks =
      breakSeekData.breaks.filter(adBreak => !adBreak.isWatched);
  breakSeekData.breaks = unwatchedBreaks;

  return breakSeekData;
});

クリップ読み込みインターセプタを分割

中断クリップの読み込みインターセプタを使用すると、BreakClip オブジェクトを変更できます。 必要があります。

ブレーク クリップの読み込みインターセプタは、 合成されたタイムラインの区切り また、kubectl の「get」コマンドや setBreakClipLoadInterceptor。 Break を入力する前に、このインターセプタは個々の要素ごとに 1 回呼び出されます。 その中断で BreakClip が定義されています。SDK はオリジナルの BreakClip コールバック関数のパラメータとして渡します。アプリケーションはその後、変更を この BreakClip を返し、SDK がブレークを取得して表示できるようにします。 クリップを作成します。null が返されるか、何も返されない場合、ブレーク スキップされます。

下記の例のように、挿入点のクリップの contentUrl を次のように変更します。 ユーティリティ関数呼び出し getUrlFromClipId。ここで BreakClip の id は URL にマッピングされます。

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
const breakManager = playerManager.getBreakManager();

breakManager.setBreakClipLoadInterceptor(
    (breakClip, breakClipLoadInterceptorContext) => {

  // Obtains the URL of a break clip id from a function call.
  breakClip.contentUrl = getUrlFromClipId(breakClip.id);

  return breakClip;
});

広告のスキップ

Web Receiver SDK にミッドロール挿入点と個々の挿入点クリップをスキップする API が用意されている 挿入できます。この SDK では、必要に応じてクリップをスキップして、 送信側のアプリやスマートディスプレイデバイスとやり取りできます。

ユーザーのスキップ可能な広告ブレーク クリップ

広告ブレーク クリップをスキップ可能に設定すると、接続されている送信者とやり取りできるようになります スマート ディスプレイ デバイスを使用して、必要に応じて ブレーク クリップを再生しています。設定 whenSkippable 0 または正の秒数に設定すると、 BreakClip オブジェクト。再生開始後、プレーヤーは休憩のクリップをスキップ可能とみなし、 指定した秒数分のブレーク クリップが再生されました。この値を 0 に設定する ユーザーがミッドロール挿入点をすぐにスキップできるようにします。

// Create the BreakClip.
let clip = new cast.framework.messages.BreakClip('bc');
clip.title = 'The Ad Title to be displayed during playback';
clip.whenSkippable = 10; // Users can skip the clip after 10 seconds of playback.

この情報は、送信者の元の読み込みリクエストまたは 受信します。スキップすると、合成されたタイムラインのミッドロール挿入点のクリップが再生されます 現在のブレーク クリップの再生を停止します。プレーヤーは次の動画を読み込み クリップがある場合にそのクリップを中断するか、メイン コンテンツを読み込みます。スキップすると 埋め込みタイムラインのミッドロール挿入点は、挿入点クリップの最後に移動します。 その時点からストリームの再生が継続されます。

プログラムによる広告のスキップ

ユーザーが何も操作しなくても広告を自動的にスキップすることもできます。

再生の中断全体をスキップするには、アプリで isWatched Break のプロパティを true にマッピング。この処理は読み込み中いつでも実行できます。 コンテンツの再生にも使用できます。isWatched プロパティは、 メイン コンテンツの現在の時刻でブレークの position に達したときにプレーヤーを起動させる。ちなみに その時点から、休憩を開始するかどうかがプレーヤーによって決定されます。 以下のサンプルでは、すべての挿入点をループし、 プレーヤーの読み込み中値を指定します。

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
const breakManager = playerManager.getBreakManager();

playerManager.addEventListener(cast.framework.events.EventType.PLAYER_LOADING,
    (event) => {

  // Obtain the breaks and iterate through each item to skip all ad breaks.
  let breaks = breakManager.getBreaks();
  breaks.forEach((brk) => {
    brk.isWatched = true;
  });
});

プログラムで特定の挿入点クリップをスキップするには、 break clip load インターセプタ を使用してください。方法 null を返す場合、またはコールバック関数で値を返さない場合、 スキップされます

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
const breakManager = playerManager.getBreakManager();

breakManager.setBreakClipLoadInterceptor(
      (breakClip, breakClipLoadInterceptorContext) => {
  return null;
});