Das IMA DAI SDK unterstützt die Integration in eine minimale HbbTV-Videoplayer-App. Das IMA DAI SDK ermöglicht die Google Ad Manager-Nachfrage nach einem Breitband-Anzeigenstream, der einen Broadcast-Contentstream begleitet. In diesem Leitfaden wird beschrieben, wie du ein Anzeigenmanifest basierend auf Anzeigenereignisdaten aus dem Übertragungsstream lädst.
Wenn du dir eine fertige Beispielintegration ansehen oder nachvollziehen möchtest, lade die lineare HbbTV-Beispiel-App mit IMA HTML5 DAI SDK herunter. Zur Unterstützung älterer Fernseher sind diese Anleitung und die Beispiel-App auf GitHub in ES5-JavaScript geschrieben.
Informationen zur Integration in andere Nicht-HbbTV-Plattformen finden Sie unter Interactive Media Ads SDKs.
Vorbereitung
Bevor Sie mit dieser Anleitung fortfahren, benötigen Sie Folgendes:
- Wenn Sie die dynamische Anzeigenbereitstellung von IMA verwenden möchten, benötigen Sie ein erweitertes Ad Manager 360-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 Übertragungsobjekt für die Medienwiedergabe interagiert. Weitere Informationen findest du unter HbbTV Broadcast AV-Objekt.
- Eine dash.js-Version, die das Vorabladen unterstützt. Wir empfehlen die Version 4.6.0 oder höher.
- Einen Webserver zum Hosten der Anwendung.
- Eine Testumgebung mit einem DVB-Broadcast-Stream. Eine ausführliche Anleitung zum Einrichten der Testumgebung findest du unter HbbTV-Anwendung ausführen.
- Broadcast-Stream: Hiermit wird ein Broadcast-Stream mit benutzerdefinierten AIT-Daten (Application Information Table) erstellt. Außerdem benötigen Sie eine Möglichkeit, den Übertragungsstream für den Empfang durch den Fernseher zu übertragen. Sie können den Übertragungsstream mit einem DVB-Modulator oder mit anderen Methoden übertragen.
- Webserver: Hoste die HbbTV-Anwendung auf einem Webserver, auf den der Fernseher zugreifen kann.
- Ein Livestream-Ereignis vom Typ Manifest für die Pod-Auslieferung. Eine Anleitung zum Erstellen des Ereignisses findest du unter Livestream für die dynamische Anzeigenbereitstellung einrichten.
Kompatiblen Übertragungsstream erstellen
Deine HbbTV-App verwendet broadcastContainer.addStreamEventListener(), um HbbTV-Streamereignisse in deinem Übertragungsstream zu überwachen. Damit Anzeigen richtig geladen und wiedergegeben werden können, musst du deinen Übertragungsstream mit den folgenden Ereignistypen einrichten, um die zugehörige JSON-String-Nutzlast anzugeben:
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-Stringnutzlast mit streamEvent.type hinzu. Damit das Preloading von Anzeigen unterstützt wird, muss das Ereignis AD_BREAK_EVENT_ANNOUNCE streamEvent.duration und streamEvent.offset enthalten. Weitere Informationen findest du unter HbbTV-Streamereignisse anhören.
Informationen zum Einrichten des Übertragungsstreams findest du im Beispiel für einen multiplexierten MPEG-Transportstream.
Wenn Sie den Beispielstream verwenden möchten, müssen Sie die URL der Tabelle mit Anwendungsinformationen für Ihre eigene Streameinrichtung aktualisieren.
Livestream-Ereignis für die Bereitstellung von Pods erstellen
Damit Anzeigen in Ihrer HbbTV-App ausgeliefert werden können, benötigen Sie einen Pod, der Livestream-Ereignisse ausliefert. Weitere Informationen zum Einrichten des Ereignisses findest du unter Livestream für die dynamische Anzeigenbereitstellung einrichten. Damit die App auf den von dir eingerichteten Stream zugreifen kann, müssen die folgenden Variablen vorhanden sein:
NETWORK_CODE: Der Ad Manager-Netzwerkcode zum Anfordern von Anzeigen.CUSTOM_ASSET_KEY: Der benutzerdefinierte Asset-Schlüssel aus 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 für die IMA HbbTV-Beispiel-App verwendet. Erstellen Sie die folgenden Dateien, um dem Leitfaden zu folgen:
index.html: HTML-Index für Ihre Anwendung.Style.css: CSS-Stil für Ihre App.application.js: JS-Haupteinstiegspunkt. Verwaltet Wiedergabestatus und Werbeunterbrechungen.video_player.js: Verwaltet den Dash.js-Player, der für die Wiedergabe von Anzeigen verwendet wird.ads_manager.js: Verwaltet die IMA-Einrichtung, die Streamanfrage und die Ereignisverarbeitung.
ads_manager.js richtet das IMA DAI SDK ein. Das IMA DAI SDK wird in den folgenden Komponenten implementiert:
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 der Testumgebung findest du in diesem Leitfaden zum Ausführen einer HbbTV-Anwendung.
IMA DAI SDK und DASH.js laden
Lade das IMA DAI SDK und dash.js in deine App, um die Wiedergabe des Anzeigenstreams zu starten. Füge vor dem application.js-Tag dash.js und das IMA-Framework mithilfe von Script-Tags in index.html hinzu.
<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>
Erstellen Sie als Nächstes eine Videoplayer-Wrapper-Klasse, um den dash.js-Player zu starten und zu steuern.