Z tego przewodnika dowiesz się, jak zaimplementować funkcję dodawania do zakładek za pomocą pakietu IMA DAI SDK podczas korzystania z dynamicznego wstawiania reklam (DAI) w przypadku strumieni wideo na żądanie (VOD). Zakładamy, że masz działającą implementację IMA DAI, taką jak ta przedstawiona w artykule Wprowadzenie.
Co to jest dodawanie do zakładek?
Tworzenie zakładek to możliwość oznaczenia konkretnego momentu podczas strumieniowania zawartości i powrócenia do niego. Załóżmy, że użytkownik obejrzał 5 minut filmu, zamknął strumień wideo, a potem do niego powrócił. Funkcja tworzenia zakładek zapisuje postęp oglądania treści, dzięki czemu użytkownik może wygodnie wznowić odtwarzanie.
Zakładki DAI
Podczas dodawania do zakładek strumienia DAI musisz zapisać identyfikator strumienia i czas, w którym użytkownik opuścił film. Gdy użytkownik wróci, ponownie poproś o strumień i przejdź do zapisanego momentu. Każda instancja żądanego strumienia może zawierać przerwy na reklamy o różnym czasie trwania, więc zapisanie czasu strumienia nie będzie działać. W rzeczywistości chcesz kontynuować od tego samego momentu.
Metody konwersji na ratunek
Pakiet IMA DAI SDK udostępnia parę metod do wysyłania żądań czasu treści dla danego czasu strumienia oraz czasu strumienia dla danego czasu treści. Dzięki tym metodom konwersji możesz zapisać czas treści dodanych do zakładek, a następnie przejść do odpowiedniego czasu transmisji w nowej instancji transmisji. Poniżej znajdziesz opis tego podejścia oraz link do przykładowej aplikacji, która pokazuje działającą implementację zakładek.
Zapisywanie i wczytywanie zakładek strumienia reklam
Zapisz zakładkę, gdy odtwarzacz treści jest wstrzymany.
onPause() {
var bookmarkTime = Math.floor(
streamManager.contentTimeForStreamTime(videoElement.currentTime));
}
Wczytuję zakładki
Załaduj zakładkę, gdy ponownie zażądasz strumienia.
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);
}
Przykładowa aplikacja
Pobierz przykładową aplikację, aby zobaczyć implementację dodawania do zakładek.