使用 HLS 插播内容提升广告体验

探索 HLS 插播内容如何帮助你将广告无缝插入到 HLS 内容中。我们还将展示如何利用整合的时间线调整 UI 体验，并为插播内容打造同播共享体验。

章节

资源

相关视频

WWDC21

下载

大家好我叫 Julian 是一名 AVFoundation 工程师近年来我们推出了 HLS 插播作为在主要内容中插入广告的一种方法今年我们将提供多种新的方法来显示插播并通过它来导航因此如果你有兴趣插入广告或只想了解如何通过新的方法来添加 HLS 插播本次讲座就非常适合你在本次讲座中我们将首先回顾 HLS 插播当前的工作原理

接着我们会讨论新的 Integrated Timeline API 这个 API 提供了一个数据模型用于打造 App 的 UI 体验

最后我们将讨论插播式同播共享的新功能

现在我们来快速回顾一下 HLS 插播

对于 HLS 插播来说广告或插播是两种独立的素材可以在主要内容时间线上为它们设定时间这是一个典型的媒体播放列表如果我们想在 5 秒处在内容中插入一个插播只需将开始日期指定为从内容的 “Program-Date-Time”算起的 5 秒后这样就会先播放 5 秒钟的主要内容然后开始播放插播式 URL 的内容最后我们将在这个插播结束后继续播放主要内容

与直接将广告插入主要内容相比 HLS 插播具备众多优点插播支持后期绑定广告决策而不要求广告与主要内容存在关联虽然 HLS 插播已主要用于广告插入但我们鼓励用户使用它来显示其他辅助内容比如节目宣传片、工作室横幅和节目回顾环节以替代那些以不连续方式提供的内容对于将 HLS 插播插入你的内容这还只是冰山的一角如果你想了解更多信息请观看 “探索 HLS 中的动态前贴片广告和中贴片广告” 今年我们将提供一个全新的 AVFoundation API 叫做 Integrated Timeline 这个 API 引入了一个数据模型用于控制那些附带插播的内容播放的时间和顺序你可以利用这个数据模型打造全新的 UI 体验并帮助用户在插播内外流畅地进行导航

首先我们将简要介绍在 Integrated Timeline 上显示插播的不同方法

之后继续了解这个 API 及其使用方法然后我们会查看一个示例 App 它使用了 Integrated Timeline 来构建 UI 最后我们会讨论新的 HLS 语法它用于描述插播在 Integrated Timeline 中的运行方式

现在我们来立即了解一下在时间线上显示插播的几种方法

对于插入附带 VOD 内容的广告一个常见用例是将插播标记为传输栏上的一个点

当播放到这一点时播放头便会在播放插播时停止插播结束后主要内容会继续播放而播放头也会继续运行插播方面的另一个用例是将插播表示为传输栏上的一个范围如此一来这个插播的时长便会计入传输栏总时长

对于广播式直播中的广告或将嵌入内容替换为插播的任意场景通常都会采用这种方法

最后一个示例则是对前一示例的延伸在前一示例中我们在 UI 中以黄色来突出显示插播在本例中待插入的插播与主要内容难以相互区分将 HLS 插播与评级提示插播、节目回顾等前贴片广告或是配音信息卡等后贴片广告搭配使用时这个功能非常实用尤其是针对插播内容与主要内容密切相关的情况

介绍了 Integrated Timeline 将会建模的不同用例后我们来了解一下 AVPlayerInterstitalEvent API 的新增功能它们用于标记上述每个用例

要标记时间线上的某个点我们可以创建一个插播事件并将名为 timelineOccupancy 的新属性的值设为 singlePoint

此时要标记时间线上的一个范围我们可将这个事件的 timelineOccupancy 设为 fill 但是由于插播事件会在播放头靠近时动态载入因此事件的实际时长可能会出现推迟我们可提供 plannedDuration 作为备选时间线直到获悉实际时长为止总之最好是为范围插播设置这一属性

对于最后一个用例其中的范围插播在 UI 中难以区分我们可将 supplementsPrimaryContent 设为 true

了解了如何标记时间线上的插播行为后我们来看看 Integrated Timeline API

为观察时间线进展 IntegratedTimeline 提供一个 API 来获取 currentTime

当播放头到达 PointEvent 位置时 currentTime 会在事件播放的同时停止前进

事件播放结束后 currentTime 会继续前进在本例中当我们到达下一个插播事件时 currentTime 会在播放这个事件的同时继续前进

此外 Integrated Timeline 还可在插播内进行搜寻假设客户端想向前搜寻 10 秒于是便会落在这个 FillEvent 的中间位置如果没有这个 API 便难以完成搜寻尤其是此时这一插播事件既未载入也未在 AVPlayer 上排队但通过这个 API 可轻松随意搜寻到时间线上的任意位置而无论它是主要内容还是插播作为 Integrated Timeline 的一部分它会提供一个名为 AVPlayerItemSegment 的新对象时间线上的每个片段都是一个分段每个分段均会提供有关这部分内容的关键详细信息以及它在时间线上所占用的时间即使是主要内容的范围也会被视为分段

整合时间线的最大优点之一在于它可以简化播放 UI 的绘制但要做到这一点并不容易因为时间线会不断变化为了提供一个自洽状态我们引入了时间线可提供的一个快照对象这个快照代表整个自洽属性集合绘制 UI 需使用这些属性

现在随着播放的前进以及时间线的变化底部的快照会保持静态且不会变化

借助 AVPlayerItemIntegratedSnapshot 我们可获取快照中所有 AVPlayerItemSegment 的列表在本例中我提取了几个分段于是我们可查看它们的值例如快照中的第一个主分段会将自身标记为 primary 并占用 0 到 5 的时间线范围下一个分段为插播 PointEvent 分段在这里表明它会占用 5 到 5 的范围即时长为 0 此外它还可以提供对这个插播事件的访问权限这个事件中还会包含作为 singlePoint 的 timelineOccupancy

最后所选最后一个分段为 FillEvent 这个分段会占据 20 到 30 的时间线范围且 timelineOccupancy 为 fill

了解了所有关键对象后我们来看看如何利用 Integrated Timeline 构建一个简单的 UI 首先我们需要创建主要的 AVPlayerItem 然后从 AVPlayerItem 获取 integratedTimeline 现在我们可从时间线中抓取快照来绘制当前状态假设我们有一个用于绘制 UISlider 的例程它只需要 start、 end 和 currentPosition 我们可从快照中获取所有这些值我们将 start 设为 0 duration 为快照的时长 currentPosition 则是快照的 currentTime 此时我们有一个简单的传输栏它可以将填充插播作为整个滑块的一部分包括在内现在我们要开始在时间线上绘制单个点为了获取点事件的位置我们可对快照分段进行过滤只包含类型为插播且 timelineOccupancy 为 singlePoint 的分段

此时对于每个分段我们都可以使用分段的 timeMapping 目标 start 来绘制一个点用它作为分段在整体时间线上的位置

最后我们来突出显示这些填充插播在此我们会过滤快照的分段并包含用 occupancy 为 fill 的插播来进行表示的那些分段由于补充主要内容表明该事件不应在 UI 中加以区分因此我们会忽略进行了这项设置的所有插播获取这些分段后我们只需使用这些分段的 timeMapping 目标并在 UI 滑块上突出显示该片段即可

时间线可能会频繁变化而且可能会在解析插播后时常变化或是在直播时频繁更新因此需要监听时间线中的 snapshotsOutOfSyncNotification 以便在发生这些情况时更新 UI 调用通知闭包时我们可通过 userInfo 来查看原因例如如果原因为 segmentsChanged 我们可能就需要用新的快照来重绘传输栏但是当原因为 currentSegmentChanged 时我们可能需要更新 playerControls 或其他 UI 元素以便转换为插播或从插播转出

了解这个 API 和部分示例代码后我们来看看本讲座附带的示例 App

在这个示例 App 中我们提供了不同的示例首先我们来看看名为 “Fill Interstitial”的示例这个示例包含一个将要在内容 10 秒处插入的范围插播

底部的传输栏从 10 秒开始为黄色范围用来显示插播播放时播放会在预期时间过渡到插播

现在我们可尝试进行一些搜寻并搜寻回主要内容中最后我们会搜寻回这个插播

太棒了！

我刚才展示了如何在 App 中构建插播你也可以在主要播放列表中指定插播你可按以下方式在服务器上描述插播在时间线上的外观

首先是点示例这是 HLS 插播的 DateRange 标签为了让时间线把它视为 POINT 我们引入了一个新属性 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 用来表示 App 的 UI 不应对其进行唯一标记

由于 Integrated Timeline 允许将插播作为 UI 中主要内容的其中一部分来显示这些插播在同播共享期间也可进行协调便很有意义因此今年我们为协调插播添加了支持

现在我们来看看插播式同播共享的运作方式及其启用方法此时在一个协调后的同播共享会话中存在两个播放器我们的想法是 Player1 和 Player2 可在 Event1 播放期间同时继续同步播放

对于搜寻假设 Player1 想搜寻到 Event1 并将其发送回主要内容中这个搜寻任务将提议给 Player2 两个播放器都会从这个新的点开始继续同步播放要启用对插播的同播共享支持其中一项关键要求是要求插播事件对所有参与者来说都是共享的换言之本例中的 Event1 对两个播放器都应该是共享的而且必须为同一内容如果插播不是共享的播放器就不会在插播期间协调播放让我们看看如何告知这项要求

AVPlayerInterstitialEvent 新增的功能之一是一个布尔值可用于指定内容是否会在不同参与者或播放会话中改变在本例中通过将 contentMayVary 设为 false 可以表明这个插播为静态或共享插播而且允许对事件进行协调

最后我们还可以在 DateRange 标签中标记同一行为具体方法是使用新的属性 X-CONTENT-MAY-VARY 并将它设为 NO

好了现在我们来看看支持同播共享的示例 App 我们在一个 FaceTime 通话中设置了两部手机在这个演示中我们选择 Fill (Supplements Primary) 示例其中包含一个在内容第 10 秒处的插播

请注意这两部手机一开始会保持同步当过渡到插播时它们仍会保持同步接着我们发出暂停信号然后向后搜寻最后则是向前搜寻

请注意所有这些命令是如何与这两台设备无缝协作的总结一下现在你可使用 Integrated Timeline 通过插播来打造 UI 体验你可以自定插播体验具体方法是在这个 API 中或使用新的 DateRange 属性指定插播行为现在你还可以将插播标记为在这个 API 中不可变从而为插播素材启用同播共享支持如需了解其他相关讲座请观看“探索 HLS 中的动态前贴片广告和中贴片广告” 详细了解 HLS 插播如需进一步了解同播共享请观看“使用群组活动协调媒体体验” 感谢观看

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.

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。