Pakiet IMA DAI SDK obsługuje integrację z minimalną aplikacją odtwarzacza wideo HbbTV. Umożliwia on wyświetlanie w usłudze Google Ad Manager reklam w strumieniu szerokopasmowym, które towarzyszą strumieniowi treści nadawanych. Ten przewodnik zawiera informacje o wczytywaniu manifestu reklamy na podstawie danych o zdarzeniach związanych z reklamami w strumieniu transmisji.
Aby wyświetlić gotową przykładową integrację lub ją prześledzić, pobierz przykładową aplikację HbbTV Linear z pakietem IMA HTML5 DAI SDK. Aby obsługiwać starsze telewizory, ten przewodnik i przykładowa aplikacja na GitHubie są napisane w ES5 JavaScript.
Informacje o integracji z innymi platformami niż HbbTV znajdziesz w sekcji Interactive Media Ads SDKs.
Wymagania wstępne
Zanim przejdziesz dalej, upewnij się, że masz:
- Aby korzystać z IMA DAI, musisz mieć konto Ad Managera 360 w wersji Advanced. Jeśli masz konto Ad Managera, skontaktuj się z menedżerem konta, aby uzyskać więcej informacji. Informacje o rejestracji w usłudze Ad Manager znajdziesz w Centrum pomocy Ad Managera.
- Aplikacja HbbTV wchodząca w interakcję z obiektem transmisji w celu odtwarzania multimediów. Więcej informacji znajdziesz w artykule na temat obiektu HbbTV Broadcast AV.
- Wersja dash.js, która obsługuje wstępne wczytywanie. Zalecamy korzystanie z wersji 4.6.0 lub nowszej.
- Serwer WWW do hostowania aplikacji.
- środowisko testowe ze strumieniem transmisji DVB; Szczegółowe instrukcje konfigurowania środowiska testowego znajdziesz w artykule Uruchamianie aplikacji HbbTV.
- Strumień transmisji: przygotuj strumień transmisji zawierający niestandardowe dane z tabeli informacji o aplikacji (AIT). Musisz też mieć możliwość przesyłania strumienia transmisji do telewizora. Możesz użyć modulatora DVB do przesyłania strumienia transmisji lub innych metod.
- Serwer internetowy: hostuj aplikację HbbTV na serwerze internetowym dostępnym dla telewizora.
- Zdarzenie transmisji na żywo z typem Blok reklamowy z plikiem manifestu. Aby utworzyć wydarzenie, przeczytaj artykuł Konfigurowanie transmisji na żywo na potrzeby dynamicznego wstawiania reklam.
Tworzenie zgodnego strumienia transmisji
Aplikacja HbbTV używa interfejsu broadcastContainer.addStreamEventListener() do nasłuchiwania zdarzeń strumienia HbbTV w strumieniu transmisji. Aby prawidłowo wczytywać i odtwarzać reklamy, musisz skonfigurować strumień transmisji, uwzględniając w nim te typy zdarzeń, aby zawierały powiązany ładunek 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ń dołącz ładunek ciągu JSON z parametrem 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 Słuchanie zdarzeń strumienia HbbTV.
Aby skonfigurować strumień transmisji, zapoznaj się z przykładem multipleksowanego strumienia transportowego MPEG.
Aby użyć przykładowej transmisji, musisz zaktualizować adres URL tabeli informacji o aplikacji w konfiguracji własnej transmisji.
Tworzenie wydarzenia z transmisją na żywo z wykorzystaniem podów
Aby wyświetlać reklamy w aplikacji HbbTV, musisz mieć zdarzenie transmisji na żywo z wyświetlaniem bloków reklamowych. 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 do wysyłania żądań reklam.CUSTOM_ASSET_KEY: niestandardowy klucz pliku Ad Managera wygenerowany podczas konfigurowania transmisji na żywo na potrzeby DAI.
Tworzenie struktury pliku 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: styl CSS dla aplikacji.application.js: główny punkt wejścia JS. Zarządza stanem odtwarzania i przerwami na reklamy.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 zdarzenia strumienia i reklamy do wydawcy.
Szczegółowe instrukcje dotyczące konfigurowania środowiska testowego znajdziesz w tym przewodniku na temat uruchamiania aplikacji HbbTV.
Załaduj pakiet IMA DAI SDK i DASH.js
Aby rozpocząć odtwarzanie strumienia reklam w transmisji, załaduj 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ę opakowującą odtwarzacza wideo, aby zainicjować i kontrolować odtwarzacz dash.js.