儲存及載入廣告串流書籤
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
本指南說明如何在使用動態廣告插播 (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);
}
範例應用程式
下載範例應用程式,查看書籤實作方式。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2025-08-21 (世界標準時間)。
[null,null,["上次更新時間:2025-08-21 (世界標準時間)。"],[[["\u003cp\u003eThis guide explains how to implement bookmarking in video-on-demand (VOD) streams using the IMA DAI SDK for a seamless viewing experience when users return to previously watched content.\u003c/p\u003e\n"],["\u003cp\u003eBookmarking with DAI involves saving the content time, not the stream time, to ensure accurate resumption due to potential ad break variations.\u003c/p\u003e\n"],["\u003cp\u003eThe IMA DAI SDK provides methods \u003ccode\u003econtentTimeForStreamTime\u003c/code\u003e and \u003ccode\u003estreamTimeForContentTime\u003c/code\u003e to convert between stream and content time for bookmarking functionality.\u003c/p\u003e\n"],["\u003cp\u003eA sample app demonstrating a working bookmarking implementation is available for download and reference.\u003c/p\u003e\n"]]],[],null,["# Save and load ad stream bookmarks\n\nThis guide shows how to implement bookmarking using the IMA DAI SDK\nwhen using Dynamic Ad Insertion (DAI) for video-on-demand (VOD) streams.\nThis assumes a working IMA DAI implementation, such as the one presented in\n\n[Get Started](/interactive-media-ads/docs/sdks/html5/dai-quickstart).\n\n\nWhat is bookmarking?\n--------------------\n\nBookmarking is the ability to save and then return to a specific point\nin the content stream. Suppose a user watches five minutes of content,\nleaves the video stream, and then returns to it. Bookmarking saves the\nuser's position in the stream so the stream can pick up from where it\nleft off, providing a seamless experience to the viewer.\n\nDAI bookmarking under the hood\n------------------------------\n\nWhen bookmarking a DAI stream, you must record the stream id and time\nwhen the user leaves the video. When the user returns, re-request the\nstream and seek to the saved time. Since each instance of the requested\nstream can have ad breaks of different durations simply saving the stream\ntime won't work. What you really want to do is continue from the same\n**content time**.\n\nConversion methods to the rescue\n--------------------------------\n\nThe IMA DAI SDK provides a pair of methods to request the **content time**\nfor a given **stream time** and the **stream time** for a given **content\ntime** . Using these conversion methods you can store the bookmarked\n**content time** and then seek to the corresponding **stream time** in\nthe new instance of the stream. Here's the approach, including a link\nto a sample app that shows a working bookmarking implementation.\n\nSave and load ad stream bookmarks\n---------------------------------\n\nSave a bookmark when the content player is paused. \n\n onPause() {\n var bookmarkTime = Math.floor(\n streamManager.contentTimeForStreamTime(videoElement.currentTime));\n }\n\nLoading bookmarks\n-----------------\n\nLoad the bookmark when re-requesting a stream. \n\n function loadUrl(url) {\n hls.on(Hls.Events.MANIFEST_PARSED, () =\u003e {\n var startTime = 0;\n if (bookmarkTime) {\n var startTime = streamManager.streamTimeForContentTime(bookmarkTime);\n // Seeking on load triggers the onSeekEnd event, so treat this seek as\n // if it's snapback. Without this, resuming at a bookmark kicks you\n // back to the ad before the bookmark.\n isSnapback = true;\n }\n hls.startLoad(startTime);\n videoElement.addEventListener('loadedmetadata', () =\u003e { videoElement.play(); });\n });\n hls.loadSource(url);\n hls.attachMedia(videoElement);\n }\n\nSample app\n----------\n\n[Download the Sample app](//github.com/googleads/googleads-ima-html5-dai)\nto see a bookmarking implementation."]]