HLSにおけるダイナミックなプレロールとミッドロール

HLSにおけるダイナミックなプレロールとミッドロール

広告とHLSストリーム間のシームレスなトランジションを実現する方法を確認します。HLSタグとAVFoundation APIを組み込んで、メインコンテンツとミッドロールの間を簡単に遷移することのできるメディア体験を構築する方法、Appでこれらのストリームを再生するベストプラクティスを紹介します。

リソース
- Getting Started with HLS Interstitials
- - HDビデオ
  - SDビデオ
関連ビデオ

WWDC22
- HLSインタースティシャルの最新情報
WWDC21
- AVFoundationの新機能
- Group Activitiesによるメディアエクスペリエンス連携
ダウンロード

♪ ♪ みなさんこんにちは！ AVFoundationのエンジニアパラシャントです WWDC21へようこそ近年オーバー･ザ･トップのストリーミングサービスの人気はリニアテレビの人気に近づいています参入している市場によってユーザーは料金を支払う必要のある広告なしのコンテンツよりも広告がサポートする無料のコンテンツを好みます HLSストリームにインタースティシャル広告を含めたい方はこのセッションにご参加くださいやり方の説明の前に HLSストリームに広告を挿入するための既存の仕組みを簡単に説明します DISCONTINUITYタグを使ってサーバーサイドで広告挿入を行うことができます広告セグメントをコンテンツセグメントと一緒にスティッチするかなり静的なスキームですプレイリストがユーザーに提供される前に実行する必要がありますご想像のとおりこれではユーザーが広告マーカーを使って広告が決定される遅延バインディングはできませんまたユーザーがすでに見た動画の部分を視聴するとき同じ広告がもう一度再生されるリバインディングを行うことができません HLSはセグメント単位で動作するため広告ポッドとの間のトランジションはセグメントの境界で行う必要がありますコンテンツの途中に広告マーカーがあった場合広告を貼り付けるためにはそのコンテンツを分割しなければなりません品質階層の数はプライマリアセットとインタースティシャル･アセットで異なります広告をすべての主要な品質階層とつなぎ合わせるにはコンテンツのエンコーディングに一致するように広告を調整する必要がありますまた広告がプライマリコンテンツと同じコーデックを使っていることを確認してくださいライブストリーミングのパッケージャーがバックエンドの管理を行うことがあります広告とインタースティシャルはほとんどがビデオ･オン･デマンドストリームですただしパッケージャーは広告全体にわたってセグメントごとにこれらをスプールする必要がありますクライアント側に広告を挿入することもできますこれまで公式にお勧めする方法はありませんでしたより一般的なアプローチは一方のプレーヤーがプライマリコンテンツを提示もう一方がインタースティシャルを提示する２プレーヤースキームの使用です２つのプレーヤーの再生を調整しプレーヤーのビュー階層を管理することでトランジションを実現していますうまく機能するもののここでの問題は主に動作側にありますプレーヤー間でバッファリングが適切に調整されていない場合広告をプリフェッチするとプライマリコンテンツストリームのアダプティブビットレートの動作に影響しますピクチャ・イン・ピクチャや AirPlayのような機能はこういったカスタムプレーヤーアプローチではうまく機能しませんそこでこれらの懸念事項に対処して全般的に広告挿入をよりシンプルにしようと試みました HLSインタースティシャルを導入することで広告を別のアセットとして扱い番組のタイムライン上にスケジュールできます広告はDISCONTINUITYタグでつなぎ合わされません代わりにマスタープレイリストを介して参照できる自己完結型のアセットとして残りますこのスキームは動的であり遅延バインディングや広告へのリバインディングも可能ですもうセグメントの境界に制約されませんプログラムのタイムラインのどこにでも広告を任意で配置できます AVKitと組み合わせた HLSインタースティシャルは tvOSのナビゲーション制限の組み込みサポートを提供します AirPlayとピクチャ・イン・ピクチャのサポートも組み込まれていますスケジュールした広告とインタースティシャルは AirPlayセッションで引き継がれますまたプライマリプレーヤーとインタースティシャルプレーヤーの間でバッファリングやその他のシステムリソースの使用を調整しシームレスな移行を実現しています。次に HLSインタースティシャルを使用した広告とともにビデオオンデマンドコンテンツを表示する場合の一般的な再生フローを見てみましょう
この写真の青いバーはメインコンテンツを表しオレンジと緑のバーは再生中にスケジュールしたい広告ですプライマリは広告マーカーまで再生されその時点で一時停止し最初の広告が再生を開始します最初の広告が流れるとすぐに２回目の広告が流れます２回目の広告の後　プライマリの再生は　前回の続きから再開されますバッファリングシーケンスを見てみましょう最初の広告の開始時間までプライマリをバッファリングすることから始めます最初の広告を事前にバッファリングしてスムーズな移行を実現できるようにしますこれが完全にバッファリングされた後２番目の広告をプリバッファリングします２番目の広告が完全にバッファリングされた後シームレスに元に戻るようにプライマリのバッファリングを再開しますライブシナリオの再生の流れは広告の時間分だけジャンプした後にプライマリに戻ること以外は同様ですこれはライブエッジとの同期を維持するためです同様にバッファリング戦略を採用しているためシームレスな移行が可能です HLSインタースティシャルを使った広告の挿入は DATERANGEタグを使ってサーバー側でできますこのため属性を持つ日付範囲クラスを導入しましたこのプレイリストは PROGRAM-DATE-TIME タグを介してタイミング情報を伝送します広告スケジュールが日付で指定されるのでタグ付けが必須になりましたクラスをcom.apple.hls. Interstitialに設定 DATERANGEタグを使用した広告が並びます ID属性はイベントを一意に識別します START-DATEはプライマリタイムラインで広告を開始する時間を設定する箇所ですここでは広告が再生の5秒後にスケジュールされています DURATION属性は広告の持続時間を X-ASSET-URI属性はマスタープレイリストの URIを指定します X-RESUME-OFFSET START-DATEからのオフセットを指定し再生再開場所を決めます resume offsetが 0の場合中断したところから再開することになります resume offset属性がない場合は広告期間に等しいオフセットでプライマリに再結合しますライブシナリオでやりたいことだと思います
このようにインストリーム広告をスキップしたい場合もありますレジュームのオフセットをインストリーム広告の長さに指定します DATERANGEタグを使ってスケジュールできます１つ目の広告がプライマリの5秒後 2つ目の広告が 10秒後に予定されています開始時刻を同じにするだけで連続した広告のスケジュールを組むことができます 1つ目の広告が再生開始から 5秒後に始まり２つ目の広告も同様です広告はプレイリストに表示された順に表示されます X-ASSET-URI属性を使って広告を参照するこれらの方法ではプレイリストに DATERANGEタグを追加する際に Ad Podを定義する必要がありますしかしX-ASSET-LIST 属性を使用してその決定を延期することができます X-ASSET-LISTはイベントのスケジュールを含む JSONオブジェクトを指します。インタースティシャルのリストを指定する ASSETS配列があり各エントリはマスタープレイリストのURIと再生時間を指定しますこのJSONオブジェクトはバッファリング時にのみ取得されるため広告枠への遅延バインドが可能になります通常広告は最後まで再生されます X-PLAYOUT-LIMIT属性を使えば広告の終了時間を指定することができますこの属性を使用してライブブロードキャストでアーリーリターンシナリオを実装できますアーリーリターンはライブフィードに戻るために広告を中断したい箇所に使いますニュース速報であったりスポーツの盛り上がるシーンなど視聴者に見逃してほしくない場合などですアーリーリターンをどのように実装するのか？６つのセグメントを含むライブプレイリストがありますライブエッジはセグメント６の最後ですプレイヘッドは通常ライブエッジの３つのtarget duration の後ろにあります今回はセグメント３の最後にありますこの時点でセグメント６に続く 15秒の広告スポットが決定しますプレイリスト更新に含まれるのはセグメント６つ広告スケジュールを含むDATERANGEタグです次のアップデートでは再生ヘッドはセグメント４の最後に移動し広告はセグメント６の後に予定されています影付きのセグメント７は広告を表しています次の更新では再生ヘッドがセグメント５の終わりに移動しその次は広告の始まりに移動します何もしなければ広告が15秒間再生します例えば12秒後にアーリーリターンを設定したい場合は単純にプレイアウトの制限をそのように指定しますこれで広告は 12秒間再生され番組に戻ります多くの場合契約上の理由からユーザーが広告を飛び越えたりスキップしたりしないようにする必要があります X-RESTRICTタグを使用してナビゲーション制限を指定できます X-RESTRICTに値としてJUMPを設定するとユーザーは広告の前後の時間にシークできません X-RESTRICTに値としてSKIPを設定すると希望と異なるレートで広告を再生できませんこれらの制限は UIによって強制されます tvOSではAVKitによって強制されます AVPlayerViewController を使用している場合はこれらを利用できるはずです他のプラットフォームや AVKitを使用しない場合制限を適用するかは App次第です DATERANGEタグを使ってサーバーサイドの広告をスケジュールする方法を見てきましたクライアントでの進捗状況を監視する方法についてです２つの新しいAVFoundation オブジェクトを導入しますインタースティシャルがスケジュールまたは再生されたときにクライアントに通知する AVPlayerInterstitialEvent- Monitorとプレーヤーアイテムのタイムラインに広告を配置するために必要なすべての情報を含む AVPlayerInterstitialEvent オブジェクトです AVPlayerInterstitialEvent Monitorは　次のプロパティがありますプライマリアセットを再生するプライマリプレーヤー広告の再生を監視するために使用できるインタースティシャルプレーヤーへのハンドルプレーヤーに設定されたインタースティシャルを表すオブジェクトを表す AVPlayerInterstitialEvent オブジェクトの配列であるイベント配列 AVPlayerInterstitialEvent オブジェクトについてのちほど説明します currentEventへのハンドルインタースティシャルが再生されている場合は有効でありそれ以外の場合は nullになりますイベントスケジュールが変更されたときに発生する eventsDidChangeNotification があり最後にインタースティシャルとの間で遷移するときに発生する currentEvent-DidChange- Notificationがありますインタースティシャルイベントを記述する AVPlayerInterstitialEvent オブジェクトには前に見た DATERANGE属性の類似物であるプロパティがあります primaryItemはインタースティシャルを予定するタイムライン上の主要アセットを表します識別子はID属性に似ておりこれによりイベントが一意的に識別されます時間と日付のフィールドはメディアの時間と日付でインタースティシャルの開始時間を指定します START-DATE属性に近いですテンプレートアイテムのコピーを使用して広告ポッドを表すインタースティシャルプレーヤーアイテムを作成これは先ほどの ASSET-LIST属性と似ていますね restrictionsプロパティはインタースティシャルのナビゲーションの制限を指定します次に対応する DATERANGEに類似した resumptionOffsetプロパティと playoutLimit プロパティがあります最後にuserDefinedAttributes の辞書についてです DATERANGEタグでカスタム属性を指定し userDefinedAttributes プロパティを介してクライアント･アプリケーションに表示されることになります例えばビーコンの URLや広告再生のメトリクスを報告するためのカスタム属性を含めることができますインタースティシャルの再生中にAPIを使用してUIを更新する方法を示すサンプルコードを次に示しますプライマリコンテンツを再生するAVPlayerを作成しますこのコンテンツは DATERANGEタグを使用してインタースティシャルがスケジュールされていますそしてAVPlayerInterstitial- EventMonitorを作成しプレーヤーに設定します次にcurrentEvent-DidChange- Notificationをサブスクライブしてプレーヤーがインタースティシャルに出入りするときにアプリケーションに通知します通知が来たら UIを更新するだけですクライアント側で広告をスケジュールしたい場合があります AVPlayerでイベントをプログラムで設定できる
AVPlayerInterstitial- EventMonitorを継承しており多くの共通プロパティがあります注意すべき点は eventsプロパティはモニターでは読み取り専用ですがコントローラでは読み書き可能なプロパティなのでプログラムでイベントをスケジュールできますまた、現在再生中のインタースティシャルをキャンセルするための cancel CurrentEvent APIも用意されています AVPlayerで2つの広告を含む広告ポッドをどのようにスケジュールするかを見ましょうプライマリアセットを再生するAVPlayerを作成します AVPlayerInterstitial- EventControllerを作成し AVPlayerに設定します広告ポッドを表す AVPlayerアイテムの配列を作成します AVPlayerInterstitialEvent オブジェクトを作成し primaryItemをプレーヤーの現在のアイテムに指定しますこれはムービーアセットを表すものでこの例では再生の約10秒後に開始時間を指定し templateItemsには先ほど作成した広告ポッドを指定しますオブジェクトが作成されたらそれをコントローラの eventsプロパティに設定するだけです AVPlayerViewControllerでプレーヤーを設定する直前に currentItem.translates- PlayerInterstitialEvents プロパティをtrueに設定しているのに気づくでしょう AVKitはタイムラインにナビゲーションマーカーを配置し tvOSにナビゲーション制限を適用します　それではtvOS上の HLSインタースティシャルとの AVKit統合について説明するデモに移りましょう
再生開始から約40秒で開始するようにスケジュールされた広告がありますナビゲーション制限は設定されていませんタイムラインに広告マーカー表示があります
広告が再生されるとプレイヘッドの上にカウントダウンタイマーが表示されますこの広告には制限が設定されていないので Apple TVのリモコンの端に手をかざすとスキップするオプションがありますそうすることで広告をスキップしてプライマリに戻ることになります同じ設定ですが広告にはスキップ制限が設定されています
広告再生中に広告をスキップするオプションは表示されませんプライマリに戻る前に広告が再生し終わるのを待つ必要がありますトム･ハンクス「グレイハウンド」 PG13　 Apple TV+独占配信中　ジョシュありがとう 2つ広告が表示されています 1つ目はナビゲーションの制限がなく 2つ目はジャンプの制限があります両方の広告を飛び越えようとすると…
広告の再生中にプレイヘッドが制限付き広告マーカーにスナップします
我々は高みから地獄をもたらす
トム･ハンクス主演「グレイハウンド」 PG13 Apple TV+で独占配信中広告が再生されたらシークの位置から再開します
まとめとして DATERANGEタグを使用してサーバー側の広告をスケジュールできますビデオ･オン･デマンドの場合はレジューム･オフセットを0にして中断したところから番組に復帰しますライブストリームではこの属性をスキップしてライブエッジで再接続できます X-ASSET-LIST属性を使用して広告アセットの遅延バインディングを行い X-PLAYOUT-LIMIT属性を使用してライブブロードキャストでアーリーリターンをスケジュールし X-RESTRICT属性を使ってナビゲーション制限を指定できますクライアント側で広告の再生を監視するには AVPlayer-Interstitial- EventMonitorを使います AVPlayerInterstitial- EventControllerを使いプログラムで広告を設定できます WWDC21をご視聴いただきありがとうございました

class AVPlayerInterstitialEvent {
    var primaryItem: AVPlayerItem? { get }
    var identifier: String { get }
    var time: CMTime { get }
    var date: Date? { get }
    var templateItems: [AVPlayerItem] { get }
    var restrictions: AVPlayerInterstitialEvent.Restrictions { get }
    var resumptionOffset: CMTime { get }
    var playoutLimit: CMTime { get }
    var userDefinedAttributes: [AnyHashable : Any] { get }
}

10:58 - Observing server inserted events

// Client observes server-side interstitial playback
let player = AVPlayer(url: movieURL) // movieURL has EXT-X-DATERANGE ad tags
let observer = AVPlayerInterstitialEventMonitor(primaryPlayer: player)
NotificationCenter.default.addObserver(
  forName: AVPlayerInterstitialEventMonitor.currentEventDidChangeNotification,
  object: observer,
  queue: OperationQueue.main) {
      notification_ in
      self.updateUI(observer.currentEvent, observer.interstitialPlayer)
}

11:40 - AVPlayerInterstitialEventController

class AVPlayerInterstitialEventController : AVPlayerInterstitialEventMonitor {
    var events: [AVPlayerInterstitialEvent]!
    func cancelCurrentEvent(withResumptionOffset resumptionOffset: CMTime) 
}

12:01 - Client schedules ad pod

// Client inserted events

// Client schedules an ad pod at 10s into primary asset
let player  = AVPlayer(url: movieURL)  // no ads in primary asset
let controller = AVPlayerInterstitialEventController(primaryPlayer: player)
let adPodTemplates = [AVPlayerItem(url: ad1URL), AVPlayerItem(url: ad2URL)]
let event = AVPlayerInterstitialEvent( 
  primaryItem: player.currentItem,
  time: CMTime(seconds: 10, preferredTimescale: 1),
  templateItems: adPodTemplates,
  restrictions: [],
  resumptionOffset: .zero,
  playoutLimit: .invalid)

 controller.events = [event]
 player.currentItem.translatesPlayerInterstitialEvents = true
 let vc = AVPlayerViewController()
 vc.player = player
 player.play()

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

WWDC22

WWDC21