Save and load ad stream bookmarks

This guide shows how to implement bookmarking using the IMA DAI SDK when using Dynamic Ad Insertion (DAI) for video-on-demand (VOD) streams. This assumes a working IMA DAI implementation, such as the one presented in Get Started.

What is bookmarking?

Bookmarking is the ability to save and then return to a specific point in the content stream. Suppose a user watches five minutes of content, leaves the video stream, and then returns to it. Bookmarking saves the user's position in the stream so the stream can pick up from where it left off, providing a seamless experience to the viewer.

DAI bookmarking under the hood

When bookmarking a DAI stream, you must record the stream id and time when the user leaves the video. When the user returns, re-request the stream and seek to the saved time. Since each instance of the requested stream can have ad breaks of different durations simply saving the stream time won't work. What you really want to do is continue from the same content time.

Conversion methods to the rescue

The IMA DAI SDK provides a pair of methods to request the content time for a given stream time and the stream time for a given content time. Using these conversion methods you can store the bookmarked content time and then seek to the corresponding stream time in the new instance of the stream. Here's the approach, including a link to a sample app that shows a working bookmarking implementation.

Save and load ad stream bookmarks

Save a bookmark when the content player is paused.

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

Loading bookmarks

Load the bookmark when re-requesting a stream.

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);
}

Sample app

Download the Sample app to see a bookmarking implementation.