保存和加载广告连播书签

选择平台： HTML5 Android iOS tvOS Roku

本指南介绍了在使用动态广告插播 (DAI) 处理视频点播 (VOD) 流时，如何使用 IMA DAI SDK 实现书签功能。 本指南假定您已实现 IMA DAI，例如 入门指南中介绍的实现。

什么是书签？

书签功能可用于保存内容流中的某个具体点，方便之后返回同一位置。假设一位用户观看某内容 5 分钟后离开了相应视频流，然后又返回观看。由于书签可保存用户在视频流中的位置，因此用户返回时便可从上次停下的位置继续观看，畅享流畅一致的体验。

DAI 书签功能底层探秘

为 DAI 流添加书签时，您必须记录用户离开视频时的流 ID 和时间。当用户返回时，重新请求流并搜索保存的时间。由于所请求流的每个实例的广告插播时长可能不同，因此仅保存流时间是行不通的。您真正想要做的是从相同的内容时间 继续观看。

转换方法来救场

IMA DAI SDK 提供了一对方法，用于请求给定流时间 的内容时间 ，以及给定内容时间 的流时间 。使用这些转换方法，您可以存储添加书签的内容时间 ，然后在流的新实例中搜索相应的流时间 。下面介绍了这种方法，并提供了一个示例应用的链接，该应用展示了可正常运行的书签实现。

保存和加载广告流书签

在内容播放器暂停时保存书签。

onPause() {
    var bookmarkTime = Math.floor(
    streamManager.contentTimeForStreamTime(videoElement.currentTime));
}

加载书签

在重新请求流时加载书签。

function loadUrl(url) {
  hls.on(Hls.Events.MANIFEST_PARSED, () => {
    var startTime = 0;
    if (bookmarkTime) {
      var startTime = streamManager.streamTimeForContentTime(bookmarkTime);
      // Seeking on load triggers the onSeekEnd event, so treat this seek as
      // if it's snapback. Without this, resuming at a bookmark kicks you
      // back to the ad before the bookmark.
      isSnapback = true;
    }
    hls.startLoad(startTime);
    videoElement.addEventListener('loadedmetadata', () => { videoElement.play(); });
  });
  hls.loadSource(url);
  hls.attachMedia(videoElement);
}

示例应用

下载示例应用 查看书签实现。