Das IMA DAI SDK unterstützt die Integration in eine minimale HbbTV-Videoplayer-App. Mit dem IMA DAI SDK kann die Google Ad Manager-Nachfrage für einen Breitband-Anzeigenstream genutzt werden, der einen Broadcast-Contentstream begleitet. In diesem Leitfaden wird beschrieben, wie Sie ein Anzeigenmanifest laden, das auf Anzeigenereignisdaten aus dem Broadcast-Stream basiert.
Wenn Sie sich eine vollständige Beispielintegration ansehen oder ihr folgen möchten, laden Sie die HbbTV Linear Sample App with IMA HTML5 DAI SDK herunter. Zur Unterstützung älterer TV-Geräte sind diese Anleitung und die GitHub-Beispiel-App 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, sollten Sie Folgendes prüfen:
- Wenn Sie IMA DAI verwenden möchten, 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 für die Medienwiedergabe mit dem Broadcast-Objekt interagiert. Weitere Informationen finden Sie unter HbbTV Broadcast AV object.
- Eine dash.js-Version, die das Vorabladen unterstützt. Wir empfehlen die Verwendung von Version 4.6.0 oder höher.
- Ein Webserver zum Hosten der Anwendung.
- Eine Testumgebung mit einem DVB-Broadcast-Stream. Eine detaillierte Anleitung zum Einrichten der Testumgebung finden Sie unter HbbTV-Anwendung ausführen.
- Broadcast-Stream: Bereiten Sie einen Broadcast-Stream mit benutzerdefinierten Daten für die 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-Event vom 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 HbbTV-Streamereignisse in Ihrem Broadcast-Stream zu erfassen. Damit Anzeigen richtig 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. Damit das Vorabladen von Anzeigen unterstützt wird, muss das AD_BREAK_EVENT_ANNOUNCE-Ereignis streamEvent.duration und streamEvent.offset enthalten. Weitere Informationen finden Sie unter HbbTV-Streamereignisse abhören.
Informationen zum Einrichten Ihres Broadcast-Streams finden Sie im Beispiel Multiplexed MPEG transport stream (Multiplexierter MPEG-Transportstream).
Wenn Sie den Beispielstream verwenden möchten, müssen Sie die URL der Tabelle mit den Anwendungsinformationen für Ihre eigene Streamkonfiguration aktualisieren.
Livestream-Termin für Pod-Serving 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 haben:
NETWORK_CODE: Der Ad Manager-Netzwerkcode zum Anfordern von Anzeigen.CUSTOM_ASSET_KEY: Der benutzerdefinierte Asset-Schlüssel für 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-Stile 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.
Mit 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 Backend für die dynamische Anzeigenbereitstellung verarbeitet. Der Stream-Manager verarbeitet auch Tracking-Pings und leitet Stream- und Anzeigenereignisse an den Publisher weiter.
Eine detaillierte Anleitung zum Einrichten der 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 dash.js und das IMA-Framework vor dem application.js-Tag mit Script-Tags in index.html ein.
Erstellen Sie als Nächstes eine Wrapper-Klasse für den Videoplayer, um den dash.js-Player zu initialisieren und zu steuern.