探索 HLS 中的动态前置式贴片广告和插播广告

探索 HLS 中的动态前置式贴片广告和插播广告

了解如何在广告和 HLS 流之间创建无缝过渡。我们将展示如何结合 HLS 标签和 AVFoundation API 来创建在您的主要内容和插播广告之间轻松移动的媒体体验，并提供在您的 app 中播放这些流的最佳实践。

资源
- Getting Started with HLS Interstitials
- - 高清视频
  - 标清视频
相关视频

WWDC22
- HLS 插播式广告的新功能
WWDC21
- 使用群组活动协调媒体体验
- AVFoundation 的新功能
下载

♪ ♪ 嗨大家好我是普拉尚是AVFoundation的工程师欢迎来到2021年的WWDC开发者大会近几年蔚为风潮的流媒体服务应有尽有几乎已经可以媲美传统线性电视根据你所在的市场你的使用者可能实际比较偏好通过广告支持的免费内容而非无广告的付费内容所以如果你有兴趣加入广告还有其他插入式广告到你的HTTP实时流媒体上你收看的正是合适的主题在我们深入探讨之前先回顾一下一些已经存在的机制让你能在HTTP实时流媒体上插入广告你可以执行服务器这边的广告插入使用的是“不连续”的标签这是个比较静态的方案其中的广告片段跟内容片段是结合在一起的这个结合必须要提前做好甚至在播放列表贩卖给使用者之前就得完成你可能会想象这样的话便不允许延迟绑定你的广告资产你会希望广告取决于用户接近广告标志的当下甚至要重新绑定比方说有个使用者回去浏览先前他们已经看过的片段他们就会再次看到完全一样的广告因为HTTP实时流媒体的运作靠的是片段的粒度从广告片段中切换回来需要发生在片段边界如果你的广告标志刚好在内容片段的中间你就得要分割这个片段来将广告切进去通常品质层的数量会不一样你主要以及插入式广告的资产会有所不同为了要将广告接合到所有主要的品质层上广告需要被处理好来配合内容的编码你也会想确认这些广告使用和主要内容一样的解码器在实时流媒体的情境下你的节目制作人可能需要在后端进行很多簿记你的广告与插入式广告可能大部分会是随选视频的流媒体但节目制作人需要把它们安插好以每一区块的基础来让广告时段维持整体性你也能从客户那端插入广告目前为止我们并没有官方推荐以达成这种方式的作法其中一个受欢迎的方式是使用双播放器的方案其中一个播放器呈现主要的内容另一个则呈现插入式广告而转换则通过切换回放达成在两个播放器之间配合并管理使用者观看的阶层虽然这样的作法效果很好这里常出现的问题跟效能有关若缓存没有适当地配合好在两个播放器之间先行提取你的广告会影响自适应比特率的表现在你主要内容的流媒体播放上而有些功能像是图片与隔空播放里的图片会很难有好的表现跟这些自定义播放器的设计方式一起执行的话今年我们处理了这些顾虑大致上来说企图让广告插入更加简单许多我们发布了HTTP实时流媒体的插入式广告广告可以用不同资产的方式处理来安排到节目的时间轴上广告再也不用使用 “不连续”的标签结合而是保持自成一组的资产可以从他们的主播放列表引用我们很快就会看到方案是动态的允许延迟结合甚至是重新结合到你的广告清单中你不再被片段的边界限制住你可以任意地把广告摆在任何地方在节目的时间轴上 HTTP实时流媒体插入式广告以及AVKit一起为浏览限制提供了内建支持在tvOS系统上我们也内建支持隔空播放以及图片中的图片你所有排定的广告跟插入式广告会在隔空播放的过程中存续我们也配合了缓存以及其他系统资源的使用给主要或是插入式广告的播放器以达到无缝衔接的目的我们来瞧瞧典型的回放流当我们播送随选视频的内容还有使用HTTP实时流媒体插入式广告技术的广告片段时
这张图里面的蓝色横条就是你的主要内容而绿色跟橘色的横条则是你在回放里想安插的广告现在主要内容会播放到广告标志为止在这个点会暂停下来然后第一个广告会开始播出第一个广告播出后第二个广告便会紧接着开始播放在第二个广告之后主要内容会重新开始自刚刚停下的点开始我们来看一下缓存的顺序我们先由主要内容开始缓存直到第一个广告开始的时间点现在我们会预缓存第一个广告让它有办法顺畅地转换在它完全缓存完后我们会预缓存第二个广告在第二个广告完全缓存完后我们会重新开始缓存主要内容这样我们就能无缝切换回来实时情境下的回放流也很相似除了我们会重新加入主要内容在广告时长后跳过去如此我们跟现场播送的边缘才能同步这也采用了一个相似的缓存策略这样无缝衔接就有可能了所以你要如何排定HTTP 实时流媒体的插入式广告呢？你现在可以从服务器这边插入广告使用DATERANGE的标签为此我们加入了一个全新的日期范围类别拥有属性这个播放列表带有时间的信息使用的是 PROGRAM-DATE-TIME标签这些标签现在是强制的因为现在广告排程是用日期规定的我们在这里看到一个用DATERANGE标签排定的广告类别设为com.apple.hls.interstitial ID属性和事件一对一重合 START-DATE是你希望广告在主要时间轴开始的点这边我们看到广告排程到回放里的五秒 DURATION这个属性规定了广告的时长 X-ASSET-URI这个属性规定了统一资源标识符属于广告的主播放列表而X-RESUME-OFFSET这个属性规定了偏移是从START-DATE开始的你会希望主要回放从这继续重新开始偏移设定为零代表的意思是主要影片会从刚刚播到的地方继续若重新开始偏移这个属性没有加入的话我们会重新加入主要影片而它的偏移会跟广告长度一样这可能会是你想在现场播出的情况下想做的
有时候你可能会希望跳过串流中出现的广告如同这里想那么做你只需要规定重新开始偏移让它跟串流中的广告一样长你可以使用DATERANGE标签来排程多个广告我们看到这里排程的第一个广告在主要影片五秒后开始第二个则在十秒处你可以排程连续的广告只需要帮每一个规定同一个开始时间即可我们看到第一个广告开始在回放的第五秒钟第二个广告亦同广告会照着顺序展示跟播放列表里显示的一样你使用X-ASSET-URI属性的这些方法用以引用你的广告会需要你定义你的小群聚当你加入 DATERANGE标签到播放列表时但你可以延迟这个决定只要你使用X-ASSET-LIST属性 X-ASSET-LIST指向一个JSON对象里面含有事件的排程对象拥有一个ASSETS数组规定了插入式广告的清单每一个都规定了主播放列表以及长度的统一资源标识符需要注意提取这个JSON 只会发生在缓存的时候让你的广告清单可以延后结合通常广告会完整播完然而你可以规定一个结束时间给你的广告使用的是X-PLAYOUT-LIMIT属性你可以使用这个属性去执行提前返回在现场广播的时候提早返回的意思是你想中断你的广告时间来回到现场直播可能的原因包含突发新闻的状况或者是体育场上突然有刺激精彩的时刻你不希望你的观众错过了那么你要如何执行提早返回呢？这里我们可以看到一个现场直播的播放列表共有六个分段现场演出的边界在分段六的最后面播放头现在通常会是在现场边缘后面的三个目标时长以这个例子来说它在第三段的最后面在这个点有一个15秒的广告片段被决定接着第六段所以播放列表更新其实包含了全部六个段落还有DATERANGE标签带有广告排程在下次更新中播放头会移到第四段的最后面广告仍然排程来接续第六段这边暗色的第七段只是表示广告时段再下一次更新播放头移到第五段的最后面下次更新我们就来到了广告时段的开头如果你什么都不做广告会播放15秒但若你想排程提早返回例如12秒后就要切掉你只需要规定播放的时间限制就会是这么长现在你的广告会播放12秒在回到节目之前通常由于合约的关系你会想防止你的用户完全跳过或提早略过广告你可以规定浏览限制只要使用X-RESTRICT这个标签就好了 X-RESTRICT的值为跳跃能够防止使用者转到广告的某个时间点之前与之后观看 X-RESTRICT的值为跳过能够防止使用者使用预设偏好速率以外的设定播放广告注意这些限制都是由用户界面执行的在tvOS上是由AVKit执行的他们都可以任意使用如果你用 AVPlayer观看控制器来进行影片的播送如果你用的是其他的平台或是没有使用AVKit 这取决于你用的是哪种程序来执行这些限制我们既然看到你如何来排程服务器端的广告使用的是DATERANGE的标签我们来看看你要如何监测客户端这里的进展因此我们要介绍两个新的AVFoundation对象 AVPlayer插入式广告事件监测器它会通知客户端当一个插入式广告已列入排程或是正在播放而AVPlayer插入式广告事件的对象包含了所有必要的信息来安插广告到播放者项目的时间轴中 AVPlayer插入式广告事件监测器有以下几项特点一个主要播放器正在播放你的主要资产插入式广告的处置你可以用来监测广告的回放一个事件数组这个数组里都是AVPlayer插入式广告事件的对象代表了播放器上不同的插入式广告集合我们很快就会解释什么是AVPlayer插入式广告事件 currentEvent的处置当插入式广告播放时会有效其他时候则无效然后我们会有 eventsDidChangeNotification 只要事件排程改变就会发出最后则是 CurrentEvent-DidChangeNotification 会在我们转换到插入式广告及回来的时候发出 AVPlayer插入式广告事件对象描述一个插入式广告事件会拥有性质基本上就是我们之前看到 DATERANGE属性的类比 primaryItem代表了你的主要资产在它的时间轴上你想要进行插入式广告的排程标识符很类似于ID属性就只有它会跟事件重合时间及日期字段中规定了开始时间分别写出来媒体中插入式广告的时间与日期也就像START-DATE的属性我们会使用模板项目的拷贝来建立插入式广告播放项目能代表你的广告小群聚这跟ASSET-LIST属性很相似我们先前看到过了限制性质会规定你插入式广告的浏览限制之后我们会有resumptionOffset 以及playoutLimit性质类似于他们在DATERANGE的对等部分接下来我们终于有了 userDefinedAttributes的字典你便可以规定自定义属性了在DATERANGE标签中这些会呈现在你的客户端应用程序里通过userDefinedAttributes性质来表示例如说你会包含一个信标路径以及其他自定义属性来回报广告回放的数据这里有些范例代码告诉你可以怎么使用这些API来更新你的用户界面当插入式广告正在播放的时候你建立了一个AVPlayer 来播放你的主要内容因此这个内容已经把插入式广告排程好了用的是DATERANGE的标签接着再建立一个 AVPlayer插入式广告事件监测器把它设置在播放器上你接着再订阅 currentEvent-DidChangeNotification 来通知你的应用程序当播放器转换到插入式广告或是退出的时候而当通知发出时你便会更新用户界面有时候你会想排程广告在客户端我们为此介绍 AVPlayer插入式广告事件控制器会让你依节目次序在AVPlayer上设定事件这个对象的来源是 AVPlayer插入式广告事件监测器有许多的共同性质有件事需要注意当事件性质在监测器上为只读时在控制器上它是可读可写的让你能够依节目次序排程事件它也有cancelCurrentEvent的API 让你能取消现在正在播放的插入式广告在这个范例里我们看到操作者可以排程一个广告小群聚到AVPlayer上里面有两个广告你创立AVPlayer来播放你的主要资产之后再建立一个 AVPlayer插入式广告事件控制器设置在AVPlayer上你建立了AVPlayer项目的一个数组能代表你的广告小群聚接着建立AVPlayerInterstitialEvent 对象你用来规定 primaryItem为播放器目前的项目这个代表了你的电影资产这个例子中的开始时间是回放开始后大约十秒钟而templateItems则是广告片段是我们刚刚建立的在对象建立之后你只要把它设置到控制器的事件性质上你可能注意到了在我们设定播放器到AVPlayer观看控制器之前我们设定currentItem.translates- PlayerInterstitialEvents这个性质为真设立完成后AVKit 会订出浏览标志到时间轴上也会在tvOS上执行浏览限制我们现在来看看示范我们会从AVKit整合 tvOS的HTTP实时流媒体插入式广告开始
这边我们有个广告排程要开始在回放大概进行40秒后开始这个广告没有浏览限制的设定你可以看到时间线上广告标志是可见的
当广告在播放时倒数计时的计时器出现就在播放头上因为这个广告没有限制设定当我的手滑到边缘的时候用Apple TV遥控器操作我就会有跳过的选项这么做就会让我们跳出广告回到主要内容上而这一个我们的设定也一样但这个广告有跳过限制的设定
所以当广告播放时你不会看到跳过广告的选项你必须要等到它完全播完才能回到主要内容汤姆汉克斯在《灰猎犬号》分级为PG-13 Apple TV+独家放映感谢你乔许这里有两个广告我们可以在时间轴上看到第一个没有浏览限制第二个则有跳过限制所以当我们企图要跳过这两个广告的时候
我们看到播放头跳了一下到限制的广告标志上广告则正在播出
我们从天上带来地狱
汤姆汉克斯在《灰猎犬号》分级为PG-13 Apple TV+独家放映当广告播放完后我们会从寻觅位置继续播放
总结一下你现在可以排程服务器端的广告使用的是DATERANGE标签你会想把重新开始偏移规定为0 给随选视频串流这样你就能重新从节目里刚刚停下的地方继续在直播串流的时候你会跳过这个属性这样我们就能从现场边缘重新进入你可以使用X-ASSET-LIST属性来延迟结合你的广告资产在直播放映时排程提早返回使用的是X-PLAYOUT-LIMIT的属性规定你的浏览限制则是用X-RESTRICT属性监测客户端的广告回放你会使用 AVPlayer插入式广告事件监测器你可以依节目次序安排广告使用的是 AVPlayer插入式广告事件控制器感谢你的收看祝你收看WWDC其他内容愉快

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