Pakiet IMA DAI SDK obsługuje integrację z minimalną aplikacją odtwarzacza wideo HbbTV. Pakiet IMA DAI SDK umożliwia korzystanie z popytu Google Ad Managera na strumień reklam szerokopasmowych, który będzie towarzyszyć strumieniowi treści nadawanych. Z tego przewodnika dowiesz się, jak wczytać plik manifestu reklamy na podstawie danych o zdarzeniach reklamowych ze strumienia nadawczego.
Aby wyświetlić lub śledzić ukończoną przykładową integrację, pobierz przykładową aplikację HbbTV Linear z pakietem IMA HTML5 DAI SDK. Aby obsługiwać starsze telewizory, ten przewodnik i przykładowa aplikacja GitHub są napisane w języku JavaScript ES5.
Informacje o integracji z innymi platformami niż HbbTV znajdziesz w artykule Pakiety SDK do reklam interaktywnych.
Wymagania wstępne
Zanim przejdziesz dalej, upewnij się, że masz:
- Aby korzystać z IMA DAI, musisz mieć konto Ad Manager 360 Advanced. Jeśli masz konto Ad Managera, skontaktuj się z menedżerem konta, aby uzyskać więcej informacji. Informacje o rejestracji w Ad Managerze znajdziesz w Centrum pomocy Ad Managera.
- Aplikacja HbbTV, która wchodzi w interakcję z obiektem transmisji w celu odtwarzania multimediów. Więcej informacji znajdziesz w artykule Obiekt HbbTV Broadcast AV.
- Wersja dash.js, która obsługuje wstępne wczytywanie. Zalecamy używanie wersji 4.6.0 lub nowszej.
- Serwer WWW do hostowania aplikacji.
- Środowisko testowe ze strumieniem nadawczym DVB. Szczegółowe instrukcje
konfigurowania środowiska testowego znajdziesz w artykule
Uruchamianie aplikacji HbbTV.
- Strumień nadawczy: przygotuj strumień nadawczy zawierający niestandardowe dane tabeli informacji o aplikacji (AIT). Musisz też mieć możliwość przesyłania strumienia nadawczego, aby mógł on być odbierany przez telewizor. Do przesyłania strumienia nadawczego możesz użyć modulatora DVB lub innych metod.
- Serwer WWW: hostuj aplikację HbbTV na serwerze WWW dostępnym dla telewizora.
- Wydarzenie z transmisją na żywo typu Blok reklamowy z plikiem manifestu. Aby utworzyć wydarzenie, przeczytaj Konfigurowanie transmisji na żywo na potrzeby dynamicznego wstawiania reklam.
Tworzenie zgodnego strumienia nadawczego
Aplikacja HbbTV używa funkcji broadcastContainer.addStreamEventListener() do nasłuchiwania zdarzeń strumienia HbbTV w strumieniu nadawczym. Aby prawidłowo wczytywać i odtwarzać reklamy, musisz skonfigurować strumień nadawczy tak, aby zawierał te typy zdarzeń z powiązanym ładunkiem ciągu JSON:
AD_BREAK_EVENT_ANNOUNCE-{"type":"adBreakAnnounce", "pod_id":1,"duration":90, "offset":10}AD_BREAK_EVENT_START-{"type":"adBreakStart"}AD_BREAK_EVENT_END-{"type":"adBreakEnd"}
W przypadku tych zdarzeń uwzględnij ładunek ciągu JSON z streamEvent.type. Aby obsługiwać wstępne wczytywanie reklam, zdarzenie AD_BREAK_EVENT_ANNOUNCE musi zawierać streamEvent.duration i streamEvent.offset. Więcej informacji znajdziesz w artykule
Nasłuchiwanie zdarzeń strumienia HbbTV.
Aby skonfigurować strumień nadawczy, zapoznaj się z przykładem
multipleksowanego strumienia transportowego MPEG.
Aby użyć przykładowego strumienia, musisz zaktualizować adres URL tabeli informacji o aplikacji w konfiguracji własnego strumienia.
Tworzenie wydarzenia z transmisją na żywo z blokiem reklamowym
Aby wyświetlać reklamy w aplikacji HbbTV, potrzebujesz wydarzenia z transmisją na żywo z blokiem reklamowym. Informacje o konfigurowaniu wydarzenia znajdziesz w artykule Konfigurowanie transmisji na żywo na potrzeby dynamicznego wstawiania reklam. Aby uzyskać dostęp do skonfigurowanego strumienia, aplikacja musi mieć te zmienne:
NETWORK_CODE: kod sieci Ad Managera używany do wysyłania żądań reklam.CUSTOM_ASSET_KEY: niestandardowy klucz zasobu Ad Managera wygenerowany podczas konfigurowania transmisji na żywo na potrzeby dynamicznego wstawiania reklam.
Tworzenie struktury plików aplikacji
W tym przewodniku używamy struktury plików podobnej do struktury przykładowej aplikacji IMA HbbTV. Aby postępować zgodnie z tym przewodnikiem, utwórz te pliki:
index.html: indeks HTML aplikacji.Style.css: style CSS aplikacji.application.js: główny punkt wejścia JS. Zarządza stanem odtwarzania i przerwami na reklamę.video_player.js: zarządza odtwarzaczem dash.js używanym do odtwarzania reklam.ads_manager.js: zarządza konfiguracją IMA, żądaniem strumienia i obsługą zdarzeń.
ads_manager.js konfiguruje pakiet IMA DAI SDK. Te komponenty implementują pakiet IMA DAI SDK:
PodStreamRequest: obiekt, który definiuje żądanie strumienia do serwerów reklamowych Google.StreamManager: obiekt, który obsługuje strumienie dynamicznego wstawiania reklam i interakcje z backendem DAI. Menedżer strumienia obsługuje też pingi śledzące i przekazuje wydawcy zdarzenia strumienia i reklamy.
Szczegółowe instrukcje konfigurowania środowiska testowego znajdziesz w tym przewodniku dotyczącym uruchamiania aplikacji HbbTV.
Wczytywanie pakietu IMA DAI SDK i dash.js
Aby rozpocząć odtwarzanie strumienia reklam nadawanych, wczytaj do aplikacji pakiet IMA DAI SDK i dash.js. Przed tagiem application.js dodaj dash.js i platformę IMA za pomocą tagów skryptu w index.html.
Następnie utwórz klasę otoki odtwarzacza wideo, aby zainicjować i kontrolować odtwarzacz dash.js.