Pakiet IMA DAI SDK umożliwia integrację z minimalną aplikacją odtwarzacza wideo HbbTV. Pakiet IMA DAI SDK umożliwia Google Ad Managerowi generowanie strumienia reklam w sieci szerokopasmowej, który będzie towarzyszył strumieniowi treści nadawanych. Ten przewodnik zawiera informacje o wczytywaniu pliku manifestu reklam na podstawie danych o zdarzeniach reklamowych ze strumienia transmisji.
Aby wyświetlić lub prześledzić przykładową integrację, pobierz aplikację HbbTV Linear Sample z pakietem IMA HTML5 DAI SDK. Aby zapewnić obsługę starszych telewizorów, ten przewodnik i aplikacja przykładowa na GitHubie są w JavaScript ES5.
Informacje o integracji z innymi platformami niż HbbTV znajdziesz w pakietach SDK Interactive Media Ads.
Wymagania wstępne
Zanim przejdziesz do dalszej części tego przewodnika, upewnij się, że masz:
- Aby korzystać z DAI IMA, musisz mieć konto Ad Managera 360 Advanced. Jeśli masz konto w usłudze Ad Manager, aby uzyskać więcej informacji, skontaktuj się ze swoim opiekunem klienta. 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 Obiekty AV transmisji HbbTV.
- Wersja dash.js obsługująca wstępny odczyt. Zalecamy korzystanie z wersji 4.6.0 lub nowszej.
- serwer WWW do hostowania aplikacji;
- Środowisko testowe z DVB strumieniem transmisji. Szczegółowe instrukcje dotyczące konfigurowania środowiska testowego znajdziesz w artykule Uruchamianie aplikacji HbbTV.
- Strumień transmisji: przygotuj strumień transmisji zawierający niestandardowe dane z tabeli Application Information Table (AIT). Musisz też mieć możliwość przesyłania strumienia transmisji, aby telewizor mógł go odebrać. Do przesyłania strumienia transmisji możesz użyć modulatora DVB lub innych metod.
- Serwer internetowy: umieść aplikację HbbTV na serwerze internetowym, do którego telewizor ma dostęp.
- Transmisja na żywo o typie Blok reklamowy z plikiem manifestu. Aby utworzyć zdarzenie, zapoznaj się z artykułem Konfigurowanie transmisji na żywo na potrzeby dynamicznego wstawiania reklam.
Tworzenie zgodnego strumienia transmisji
Aplikacja HbbTV używa broadcastContainer.addStreamEventListener() do nasłuchiwania zdarzeń strumienia HbbTV w strumieniu transmisji. Aby prawidłowo wczytywać i odtwarzać reklamy, musisz skonfigurować strumień transmisji z tymi typami zdarzeń, aby uwzględnić powiązany ciąg danych w formacie 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ń dodaj ładunek ciągu JSON z wartością streamEvent.type. Aby obsługiwać wstępny wczyt reklam, zdarzenie AD_BREAK_EVENT_ANNOUNCE musi zawierać zdarzenia streamEvent.duration i streamEvent.offset. Więcej informacji znajdziesz w artykule słuchanie wydarzeń z transmisji HbbTV.
Aby skonfigurować strumień transmisji, zapoznaj się z przykładem multipleksowanego strumienia transportu MPEG.
Aby użyć przykładowej transmisji, musisz zaktualizować adres URL tabeli informacji o aplikacji, aby odpowiadał konfiguracji Twojej transmisji.
Tworzenie wydarzenia z transmisją na żywo służącego do obsługi podgrup
Aby wyświetlać reklamy w aplikacji HbbTV, musisz utworzyć zdarzenie transmisji na żywo z blokiem reklamowym. Informacje o konfigurowaniu zdarzenia znajdziesz w artykule Konfigurowanie transmisji na żywo na potrzeby dynamicznego wstawiania reklam. Aby uzyskać dostęp do strumienia, aplikacja musi mieć te zmienne:
NETWORK_CODE: kod sieci Ad Managera służący do żądania reklam.CUSTOM_ASSET_KEY: niestandardowy klucz zasobu w usłudze Ad Manager wygenerowany podczas konfigurowania transmisji na żywo na potrzeby dynamicznego wstawiania reklam.
Tworzenie struktury pliku aplikacji
W tym przewodniku zastosowano podobną strukturę plików jak w przykładowej aplikacji IMA HbbTV. Aby go wykonać, utwórz te pliki:
index.html: indeks HTML aplikacji.Style.css: stylizacja CSS aplikacji.application.js: główny punkt wejścia kodu 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. Pakiet IMA DAI SDK jest implementowany przez te komponenty:
PodStreamRequest: obiekt definiujący żą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 śledzenia i przekazuje wydawcy zdarzenia reklamowe i zdarzenia związane z reklamą.
Szczegółowe instrukcje dotyczące konfigurowania środowiska testowego znajdziesz w tym przewodniku po uruchamianiu aplikacji HbbTV.
Załaduj pakiet IMA DAI SDK i DASH.js
Aby rozpocząć odtwarzanie strumienia reklam nadawanych w telewizji, załaduj do aplikacji pakiet IMA DAI SDK i dash.js. Przed tagiem application.js dodaj tagi skryptu dash.js i platformy IMA, używając tagów skryptu w miejscu index.html.
<script src="https://cdn.jsdelivr.net/npm/dashjs@latest/dist/dash.all.min.js"></script> <script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
Następnie utwórz klasę opakowania odtwarzacza wideo, aby zainicjować odtwarzacz dash.js i nim zarządzać.