本指南說明如何在使用動態廣告插播 (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);
}
範例應用程式
下載範例應用程式,查看書籤實作方式。