Das IMA DAI SDK unterstützt die Integration in eine minimale HbbTV-Videoplayer-App. Mit dem IMA DAI SDK kann Google Ad Manager-Nachfrage für einen Breitband-Anzeigenstream für einen Broadcast-Contentstream genutzt werden. In diesem Leitfaden wird das Laden eines Anzeigenmanifests basierend auf Anzeigenereignisdaten aus dem Broadcast-Stream behandelt.
Wenn Sie eine abgeschlossene Beispielintegration ansehen oder nachvollziehen möchten, laden Sie die HbbTV-Beispiel-App für lineare Anzeigen mit dem IMA HTML5 DAI SDK herunter. Zur Unterstützung älterer TV-Geräte sind dieser Leitfaden und die GitHub-Beispiel-App in ES5-JavaScript geschrieben.
Informationen zur Integration mit anderen Nicht-HbbTV-Plattformen finden Sie unter IMA SDKs.
Vorbereitung
Bevor Sie mit diesem Leitfaden fortfahren, prüfen Sie, ob Sie Folgendes haben:
- Für die Verwendung von IMA DAI benötigen Sie ein Ad Manager 360 Advanced -Konto. Wenn Sie ein Ad Manager-Konto haben, wenden Sie sich an Ihren Account Manager, um weitere Informationen zu erhalten. Informationen zur Registrierung für Ad Manager finden Sie in der Ad Manager-Hilfe.
- Eine HbbTV-App, die mit dem Broadcast-Objekt für die Medienwiedergabe interagiert. Weitere Informationen finden Sie unter HbbTV-Broadcast-AV-Objekt.
- Eine dash.js-Version, die das Vorabladen unterstützt. Wir empfehlen Version 4.6.0 oder höher.
- Einen Webserver zum Hosten der Anwendung.
- Eine Testumgebung mit einem DVB-Broadcast-Stream. Eine detaillierte Anleitung zum Einrichten Ihrer Testumgebung finden Sie unter
HbbTV-Anwendung ausführen.
- Broadcast-Stream: Bereiten Sie einen Broadcast-Stream mit benutzerdefinierten Daten der Application Information Table (AIT) vor. Außerdem benötigen Sie eine Möglichkeit, den Broadcast-Stream für den Empfang durch den Fernseher zu übertragen. Sie können einen DVB-Modulator verwenden, um den Broadcast-Stream zu übertragen, oder andere Methoden.
- Webserver: Hosten Sie die HbbTV-Anwendung auf einem Webserver, auf den der Fernseher zugreifen kann.
- Ein Livestream-Ereignis mit dem Typ Manifest für die Pod-Auslieferung. Informationen zum Erstellen des Ereignisses finden Sie unter Livestream für die dynamische Anzeigenbereitstellung einrichten.
Kompatiblen Broadcast-Stream erstellen
Ihre HbbTV-App verwendet broadcastContainer.addStreamEventListener(), um auf HbbTV-Streamereignisse in Ihrem Broadcast-Stream zu warten. Damit Anzeigen ordnungsgemäß geladen und wiedergegeben werden können, müssen Sie Ihren Broadcast-Stream mit den folgenden Ereignistypen einrichten, um die zugehörige JSON-String-Nutzlast einzuschließen:
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"}
Fügen Sie für diese Ereignisse eine JSON-String-Nutzlast mit streamEvent.type ein. Zur Unterstützung des Vorabladens von Anzeigen muss das Ereignis AD_BREAK_EVENT_ANNOUNCE streamEvent.duration und streamEvent.offset enthalten. Weitere Informationen finden Sie unter
Auf HbbTV-Streamereignisse warten.
Informationen zum Einrichten Ihres Broadcast-Streams finden Sie im Beispiel
für einen gemultiplexten MPEG-Transportstream.
Wenn Sie den Beispielstream verwenden möchten, müssen Sie die URL der Application Information Table für Ihre eigene Streamkonfiguration aktualisieren.
Livestream-Ereignis für die Pod-Auslieferung erstellen
Wenn Sie Anzeigen in Ihrer HbbTV-App ausliefern möchten, benötigen Sie ein Livestream-Ereignis für die Pod-Auslieferung. Informationen zum Einrichten des Ereignisses finden Sie unter Livestream für die dynamische Anzeigenbereitstellung einrichten. Damit die App auf den von Ihnen eingerichteten Stream zugreifen kann, muss sie die folgenden Variablen enthalten:
NETWORK_CODE: Der Ad Manager-Netzwerkcode zum Anfordern von Anzeigen.CUSTOM_ASSET_KEY: Der benutzerdefinierte Asset-Schlüssel von Ad Manager, der bei der Einrichtung des Livestreams für die dynamische Anzeigenbereitstellung generiert wurde.
Dateistruktur der Anwendung erstellen
In diesem Leitfaden wird eine ähnliche Dateistruktur wie in der IMA HbbTV-Beispiel-App verwendet. Erstellen Sie die folgenden Dateien, um diesem Leitfaden zu folgen:
index.html: HTML-Index für Ihre App.Style.css: CSS-Formatierung für Ihre App.application.js: Haupt-JS-Einstiegspunkt. Verwaltet den Wiedergabestatus und die Werbeunterbrechungen.video_player.js: Verwaltet den dash.js-Player, der für die Anzeigenwiedergabe verwendet wird.ads_manager.js: Verwaltet die IMA-Einrichtung, die Streamanfrage und die Ereignisverarbeitung.
In ads_manager.js wird das IMA DAI SDK eingerichtet. Die folgenden Komponenten implementieren das IMA DAI SDK:
PodStreamRequest: Ein Objekt, das eine Streamanfrage an die Werbeserver von Google definiert.StreamManager: Ein Objekt, das Streams für die dynamische Anzeigenbereitstellung und Interaktionen mit dem DAI-Backend verarbeitet. Der Streammanager verarbeitet auch Tracking-Pings und leitet Stream- und Anzeigenereignisse an den Publisher weiter.
Eine detaillierte Anleitung zum Einrichten Ihrer Testumgebung finden Sie in diesem Leitfaden zum Ausführen einer HbbTV-Anwendung.
IMA DAI SDK und DASH.js laden
Laden Sie das IMA DAI SDK und dash.js in Ihre App, um die Wiedergabe des Broadcast-Anzeigenstreams zu starten. Fügen Sie vor dem Tag application.js dash.js und das IMA-Framework mit Skript-Tags in index.html hinzu.
Erstellen Sie als Nächstes eine Videoplayer-Wrapper-Klasse, um den dash.js-Player zu initialisieren und zu steuern.