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 zur Medienwiedergabe mit dem Broadcast-Objekt interagiert. Weitere Informationen finden Sie unter HbbTV Broadcast AV object.
- Eine dash.js-Version, die das Vorladen 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 für einen gemultiplexten 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-Event mit Pod-Auslieferung. Informationen zum Einrichten des Ereignisses finden Sie unter Livestream für die dynamische Anzeigenbereitstellung einrichten. Damit die App auf den 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 beim Einrichten des Livestreams für die dynamische Anzeigenbereitstellung generiert wurde.
Anwendungsdateistruktur 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.