HLSインタースティシャルによる広告体験の向上

HLSインタースティシャルによる広告体験の向上

HLSインタースティシャルを使用すると、HLSコンテンツに広告をシームレスに挿入できます。統合されたタイムラインを使用してUI体験を調整し、インタースティシャル対応のSharePlayを構築する方法もご紹介します。

関連する章
- 0:00 - Introduction
- 0:45 - Interstitals recap
- 1:56 - Integrated timeline
- 10:40 - SharePlay with interstitials
リソース
関連ビデオ

WWDC21
- Group Activitiesによるメディアエクスペリエンス連携
- HLSにおけるダイナミックなプレロールとミッドロール
こんにちは AVFoundationエンジニアのJulianです近年メインコンテンツに広告を挿入する簡単な方法として HLSインタースティシャルが導入されました今年はインタースティシャルを使用して表示および操作する新しい方法を提供します広告掲載に関心がある方や HLSインタースティシャルを新しい方法で組み込む方法を学びたい方にとって本セッションは最適ですまず現在のHLSインタースティシャルの仕組みを振り返ります
次に新しいIntegrated Timeline APIをご紹介しますこのAPIはアプリのUI体験を構築するためのデータモデルを提供します
最後にインタースティシャル対応の SharePlayの新機能を解説します
それでは HLSインタースティシャルの概要を簡単に復習しましょう
HLSインタースティシャルでは広告やインタースティシャルは別のアセットでメインコンテンツのタイムラインでスケジュール設定することができますこれは典型的なメディアプレイリストです例えばコンテンツの開始5秒後にインタースティシャルを再生する場合はコンテンツのPROGRAM-DATE-TIMEで START-DATEを5秒に指定しますするとメインコンテンツが 5秒まで再生された後インタースティシャルURLの再生が開始されますその後インタースティシャルが終了するとメインコンテンツの再生が再開されます
HLSインタースティシャルにはメインコンテンツへの広告の直接挿入では得られない多くの利点がありますインタースティシャルでは遅延バインディングによる広告決定ができ広告をメインコンテンツと組み合わせる必要がありません HLSインタースティシャルは主に広告の挿入に使われてきましたがその他の補助コンテンツの表示に使用することをおすすめします番組のプロモーションスタジオのバナー番組の要約のセグメントなど区切りとして挿入されるコンテンツの代わりに表示します以上はHLSインタースティシャルのコンテンツへの挿入に関する説明のほんの一部です詳細については「Explore dynamic pre-rolls and mid-rolls in HLS」をご覧ください Integrated Timelineと呼ばれる新しいAVFoundation APIが今年提供開始されますこのAPIはインタースティシャルを使ったコンテンツの再生タイミングとシーケンスのデータモデルを導入しますこのデータモデルを活用すれば新しいUI体験を構築できユーザーはインタースティシャルの表示の滑らかな切り替えが可能になります
まずインタースティシャルを統合されたタイムラインに表示する様々な方法の概要を説明します
その後 APIとその使い方の説明に進みます次に Integrated Timelineを使用して UIを構築するサンプルアプリをお見せします最後に Integrated Timelineでのインタースティシャルの動作を記述する新しいHLS構文について説明します
まずはインタースティシャルをタイムラインに表示する各種の方法です
VODコンテンツへの広告挿入の一般的なユースケースはトランスポートバー上のポイントとしてインタースティシャルをマークすることです再生がこのポイントに達すると再生ヘッドが停止しインタースティシャルが再生されますインタースティシャルの終了後メインコンテンツが再開され再生ヘッドが先に進みますほかのユースケースの例はインタースティシャルをトランスポートバーに範囲として表示しインタースティシャルの再生時間がトランスポートバー全体の再生時間に含まれるようにすることです
これはブロードキャスト形式のライブストリームにおける広告やインタースティシャルで埋め込みのコンテンツを置き換える場合に使われます
最後の例は先ほどの例を拡張したものです先ほどの例では UIのインタースティシャルが黄色いハイライトで示されていましたここではインタースティシャルはメインコンテンツと区別がつかないものとして組み込まれますこれは HLSインタースティシャルを評価バンパー番組の要約などのプリロール吹き替えなどのポストロールに使用する場合に役立ちます特にコンテンツがメインコンテンツと密接に関連している場合に適しています
統合タイムラインでモデル化される様々なケースを確認したところで各ユースケースで再生時点を示す AVPlayerInterstitalEvent APIの追加機能を見てみましょう
タイムライン上のポイントを示すにはインタースティシャルイベントを作成します次に timelineOccupancyという新しいプロパティを設定し値をsinglePointにします
タイムライン上の範囲を示すにはイベントのtimelineOccupancyを fillに設定しますただしインタースティシャルイベントは動的に読み込まれるため再生ヘッドが近づいた際イベントの実際の再生時間の検出が遅れる可能性があります plannedDurationをタイムラインのフォールバックとして指定すれば実際の再生時間がわかるまでの間使用できます範囲を指定するインタースティシャルではこのプロパティを設定しましょう
最後のケースではインタースティシャルの範囲を UI上で区別できないようにするために supplementsPrimaryContentを trueに設定します
タイムライン上でインタースティシャルの再生時点を示す方法を確認しました次は Integrated Timeline APIの解説です
タイムラインの進行を確認するために Integrated Timelineには currentTimeを取得するためのAPIが用意されています
再生ヘッドがPointEventに到達すると currentTimeが停止してイベントが再生されます
イベントの再生が終わると currentTimeは再び進みます一方次のFillのインタースティシャルイベントに到達した際は currentTimeは進み続けたままでイベントが再生されます
このAPIにはインタースティシャル内のシーク機能も用意されています例えばクライアントが10秒進めてシークしたいと仮定しますこれはFillEventの真ん中まで進むことになりますこのAPIを使わない場合このシークの実行は難しいでしょう特にインタースティシャルイベントは現時点で AVPlayerに読み込まれることもキューに入れられることもないためですこのAPIを使えばタイムライン上の任意の位置に簡単にシークできますメインコンテンツかインタースティシャルかは関係ありません Integrated Timelineの一部として AVPlayerItemSegmentという新しいオブジェクトが用意されていますタイムラインの各領域はセグメントであり各セグメントにはコンテンツに関する主要な詳細情報とタイムライン上での占有時間が設定されていますメインコンテンツの範囲もセグメントと見なされます
Integrated Timelineの最大のメリットは再生UIを簡単に描画できることですただしタイムラインは常に変化するのでその描画は難しい場合があります一貫した状態を維持するために導入したのがタイムラインから取得できるスナップショットオブジェクトですスナップショットは UIの描画に必要な一貫性のあるプロパティセット全体を表します
再生が進んでタイムラインが変化しても下部のスナップショットは固定されており変化しません
AVPlayerItemIntegratedSnapshotを使用するとそのスナップショットに含まれるすべての AVPlayerItemSegmentの一覧を取得できますこの例ではいくつかのセグメントを取り出してその値を確認できるようにしました例えばスナップショット内の最初のメインセグメントはメインとしてマークされタイムライン上の0〜5の範囲を占めます次のセグメントはインタースティシャルで PointEventですこのセグメントの占有範囲は5〜5であり再生時間はゼロですインタースティシャルイベントへのアクセスも提供しこれにはtimelineOccupancyも singlePointとして含まれます
選択された最後のセグメントは FillEventですこのセグメントはタイムライン上の 20〜30の範囲を占めており timelineOccupancyはfillです
すべての主要なオブジェクトを確認しました次は Integrated Timelineを使ったシンプルなUIの作成方法ですまずメインのAVPlayerItemを作成します次に AVPlayerItemから integratedTimelineを取得しますタイムラインからスナップショットを取得し現在の状態を描画できるようになりました開始位置終了位置現在の位置を指定するだけで UIスライダを描画するルーチンがあると仮定しましょうこれらの値はすべてスナップショットから取得できます startはzeroで durationはスナップショットの再生時間です currentPositionはスナップショットのcurrentTimeですこの時点でシンプルなトランスポートバーができましたスライダ全体の一部として fillインタースティシャルが含まれます次にタイムラインに 1つのポイントを描画してみますポイントイベントの位置を取得するにはスナップショットのセグメントをフィルタし Typeがinterstitialで timelineOccupancyがsinglePointのセグメントのみを取得します
それぞれのセグメントでセグメントのtimeMapping.target.startをタイムライン全体での位置として使ってポイントを描画します
最後に fillインタースティシャルをハイライトしますここではスナップショットのセグメントをフィルタし occupancyがfillのインタースティシャルを表すセグメントを取得します supplementsPrimaryContentはイベントがUI上で区別されるべきでないことを示すのでこれが設定されたインタースティシャルは無視されますセグメントを取得したらセグメントのtimeMapping.targetを使って UIスライダ上のその領域をハイライトします
タイムラインは極めて動的で各インタースティシャルの完了とともに頻繁に変化しますライブストリームの場合も頻繁に更新されますそのためタイムラインの snapshotsOutOfSyncNotificationをリッスンしその発生時には UIを更新する必要があります通知クロージャが呼び出されたら理由をuserInfoで調査できます例えば理由がsegmentsChangedであれば新しいスナップショットを使ってトランスポートバーを再描画できます一方理由が currentSegmentChangedであればインタースティシャルとの切り替えを行っている場合は playerControlsやその他のUI要素を更新します
以上 APIとサンプルコードを確認しました次に本セッションに関連するサンプルアプリを見てみます
このサンプルアプリには様々な例が含まれています Fill Interstitialという例を見てみましょうコンテンツ開始10秒後に再生されるよう範囲設定したインタースティシャルを含みます
下部のトランスポートバーを見るとインタースティシャルが 10秒後の黄色の範囲から開始することがわかります再生すると想定したタイミングでインタースティシャルに切り替わります
ここでシークをいくつか試しメインコンテンツに戻ってみましょう最後にインタースティシャルまで戻ります
いいですね
先ほどアプリでインタースティシャルを作成する方法を説明しましたがメインプレイリストで指定することもできますサーバからタイムライン上の表示を記述する方法を説明します
ポイントの例から見ていきますこれはHLSインタースティシャルの DateRangeタグですタイムラインでこれをポイントと見なすために新しい属性である X-TIMELINE-OCCUPIESを導入しました値がPOINTとして設定されています DateRangeタグには新たに X-TIMELINE-STYLEの属性も含まれており値はHIGHLIGHTですこれは UI表示でこのポイントをマークしなければならないことを示しています
範囲を設定する場合新しい属性 X-TIMELINE-OCCUPIESの値は RANGEに設定されています X-TIMELINE-STYLEは先ほどの例と同じです
最後にインタースティシャルをUI上で区別できないように表示する場合 X-TIMELINE-OCCUPIESはRANGEのままです X-TIMELINE-SYTLEはPRIMARYに設定しアプリのUI内でその領域を特別なスタイルで表示しないことを示します
Integrated Timelineではインタースティシャルをメインコンテンツの一部として UIに表示できるのでインタースティシャルを SharePlayセッション中に連携させられると便利ですそこで今年インタースティシャルの連携のサポートを追加します
インタースティシャル対応の SharePlayの仕組みとその利用方法を見てみましょう 2つのプレイヤーで SharePlayセッションを連携させています考え方としては Player1とPlayer2の両方が Event1の再生中も引き続き再生を同期します
シークについては Player1で Event1からメインコンテンツに戻ろうとしているとしますこのシークはPlayer2に提案され両方のプレイヤーがこの新しいポイントから引き続き再生を同期しますインタースティシャルを SharePlayでサポートするための重要な要件の一つはインタースティシャルイベントが参加者全員に共通のものであることですつまりこの例のEvent1は両方のプレイヤーで共通している必要があり同じコンテンツでなければなりませんインタースティシャルが共通でない場合インタースティシャルの再生はプレイヤー間で連携しませんこの要件に対応する方法を見てみましょう
AVPlayerInterstitialEventに追加された新機能として参加者や再生セッションによりコンテンツが変わるかをブール値で指定できますこの例では contentMayVaryをfalseに設定してこのインタースティシャルが静的であり共通することを示すことでイベントが連携可能になります
最後に DateRangeタグで同じ動作を実現するために新しい属性 X-CONTENT-MAY-VARYを NOに設定することもできます
では SharePlay対応のサンプルアプリを見てみましょう FaceTime通話で 2台のスマートフォンを使用していますこのデモではコンテンツの開始10秒後にインタースティシャルを再生する Fill（Supplements Primary）の例を選択します
両方のスマートフォンで起動が同期されておりインタースティシャルに切り替わっても同期状態が続きますその後一時停止して後方にシークし最後に前方にシークします
これらすべてのコマンドが両方のデバイスでシームレスに機能しますまとめですインタースティシャルを含むUI体験の構築に Integrated Timelineを活用できますインタースティシャルの体験をカスタマイズするために APIまたは新しいDateRange属性で動作を指定できますまた APIでインタースティシャルを変更不可としてマークすることでインタースティシャルアセットの SharePlayでの連携をサポートできます関連するセッションである「Explore dynamic pre-rolls and mid-rolls in HLS」もご覧ください HLSインタースティシャルの詳細を説明しています SharePlayの詳細については「Coordinate media experiences with Group Activities」をご覧くださいご視聴ありがとうございました

3:55 - Create a point interstitial event

// Creating a single point interstitial event
 
let pointEvent = AVPlayerInterstitialEvent(primaryItem: playerItem, time: ten)

pointEvent.timelineOccupancy = .singlePoint

4:07 - Create a fill interstitial event

// Creating a fill interstitial event
    
let fillEvent = AVPlayerInterstitialEvent(primaryItem: playerItem, time: ten)

fillEvent.timelineOccupancy = .fill
fillEvent.plannedDuration = CMTime(value: 15, timescale: 1)

4:32 - Create fill interstitial supplementing primary

// Creating a fill interstitial event supplementing primary
 
let fillEvent2 = AVPlayerInterstitialEvent(primaryItem: playerItem, time: ten)

fillEvent2.supplementsPrimaryContent = true
fillEvent2.timelineOccupancy = .fill
fillEvent2.plannedDuration = CMTime(value: 15, timescale: 1)

7:14 - Draw simple transport bar with integrated timeline

// Create AVPlayerItem and obtain its integrated timeline

let item = AVPlayerItem(url: ...)
let integratedTimeline = item.integratedTimeline

//  Any time we need a new representation of the timeline state, we can request for a snapshot
let snapshot = integratedTimeline.currentSnapshot

//  Using our snapshot, we can build a simple transport bar
drawUISlider(start: .zero, duration: snapshot.duration, currentPosition: snapshot.currentTime)

// Draw single-point interstitials on the transport bar
let pointSegments = snapshot.segments.filter { segment in
    segment.segmentType == .interstitial &&
    segment.interstitialEvent?.timelineOccupancy == .singlePoint
}
for segment in pointSegments {
    drawPoint(position: segment.timeMapping.target.start)
}

// Draw range interstitials on the transport bar
let highlightFillSegments = snapshot.segments.filter { segment in
    if (segment.segmentType == .interstitial) {
        if let interstitialEvent = segment.interstitialEvent {
            return interstitialEvent.timelineOccupancy == .fill &&
                   !interstitialEvent.supplementsPrimaryContent
        }
    }
    return false
}

for segment in highlightFillSegments {
    let range = segment.timeMapping.target
    highlightRegion(start: range.start, end: range.end)
}

8:26 - Listen to snapshotsOutOfSyncNotification to update our UI

// Listen to integrated timeline notifications to update our logic

for await _ in NotificationCenter.default.notifications(named: AVPlayerItemIntegratedTimeline.snapshotsOutOfSyncNotification, object: integratedTimeline) {

    let reason = _.userInfo![AVPlayerItemIntegratedTimeline.snapshotsOutOfSyncReasonKey] 
                as! AVPlayerIntegratedTimelineSnapshotsOutOfSyncReason
                
    switch(reason) {
    case .segmentsChanged:
        redrawTransportBar(snapshot: integratedTimeline.currentSnapshot)
    case .currentSegmentChanged:
        updatePlayerControls(snapshot: integratedTimeline.currentSnapshot)
    }
}

11:42 - Set ContentMayVary to false for Interstitial SharePlay support

// Set contentMayVary to false for SharePlay support
let event = AVPlayerInterstitialEvent(primaryItem: playerItem, time: ten)
event.contentMayVary = false
event.timelineOccupancy = .fill
event.plannedDuration = CMTime(value: 15, timescale: 1)
event.supplementsPrimaryContent = truensert code snippet.

関連する章

リソース

関連ビデオ

WWDC21