Z tego przewodnika dowiesz się, jak zaimplementować tworzenie zakładek za pomocą pakietu IMA DAI SDK w przypadku korzystania z dynamicznego wstawiania reklam (DAI) w strumieniach wideo na żądanie (VOD). Zakładamy, że masz już działającą implementację IMA DAI, taką jak opisana w przewodniku Pierwsze kroki.
Co to jest tworzenie 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ł pięć 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.
Tworzenie zakładek w DAI
Podczas tworzenia zakładek w strumieniu 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 czasu. Ponieważ każda instancja żądanego strumienia może mieć przerwy na reklamy o różnym czasie trwania, samo zapisanie czasu strumienia nie wystarczy. Tak naprawdę chcesz kontynuować od tego samego czasu treści.
Metody konwersji na ratunek
Pakiet IMA DAI SDK udostępnia parę metod, które umożliwiają żądanie czasu treści dla danego czasu strumienia oraz czasu strumienia dla danego czasu treści. Za pomocą tych metod konwersji możesz zapisać czas treści oznaczony zakładką, a następnie przejść do odpowiedniego czasu strumienia w nowej instancji strumienia. Oto opis podejścia wraz z linkiem do przykładowej aplikacji, która pokazuje działającą implementację tworzenia 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));
}
Wczytywanie zakładek
Wczytaj zakładkę, gdy ponownie wysyłasz żądanie 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ę tworzenia zakładek.