儲存及載入廣告串流書籤

本指南說明如何在使用動態廣告插播 (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);
}

範例應用程式

下載範例應用程式,查看書籤實作方式。