Mit IMA SDKs lassen sich Multimedia-Anzeigen ganz einfach in Ihre Websites und Apps einbinden. Mit IMA SDKs können Anzeigen von jedem VAST-konformen Ad-Server angefordert und die Anzeigenwiedergabe in Ihren Apps verwaltet werden. Mit IMA DAI SDKs senden Apps eine Streamanfrage für Anzeigen- und Contentvideos, entweder VOD- oder Live-Content. Das SDK gibt dann einen kombinierten Videostream zurück, sodass Sie in Ihrer App nicht zwischen Anzeigen- und Inhaltsvideo wechseln müssen.
Wählen Sie die gewünschte DAI-Lösung aus:
- Mit Full-Service-DAI einrichten: Google Ad Manager wählt Anzeigen aus und fügt sie direkt in Ihren Contentstream ein.
- Mit Pod-Auslieferung für die dynamische Anzeigenbereitstellung einrichten: Google Ad Manager stellt Anzeigen-Pods bereit, die in einen Videoplayer eingefügt oder geladen werden können.
Livestreams abspielen, die mit der Google Cloud Video Stitcher API registriert wurden
In diesem Leitfaden wird gezeigt, wie Sie mit dem IMA DAI SDK für HTML5 einen Livestream für ein Ereignis anfordern und abspielen, das mit der Google Cloud Video Stitcher API registriert wurde, und wie Sie während der Wiedergabe eine Werbeunterbrechung einfügen.
In diesem Leitfaden wird das einfache Beispiel aus dem Startleitfaden für IMA DAI erweitert.
Informationen zur Integration mit anderen Plattformen oder zur Verwendung der clientseitigen IMA SDKs finden Sie unter Interactive Media Ads SDKs.
Wenn Sie sich eine vollständige Beispielintegration ansehen oder nachvollziehen möchten, laden Sie das Cloud Video Stitcher-Beispiel für HLS oder DASH herunter.
Google Cloud-Projekt einrichten
Google Cloud-Projekt einrichten und Dienstkonten für den Zugriff auf das Projekt konfigurieren
Erstellen Sie eine Konfiguration für ein Livestream-Ereignis mit Ihrem eigenen Livestream oder einem Test-Livestream. In diesem Leitfaden wird ein HLS-Stream vorausgesetzt.
Geben Sie die folgenden Variablen für die Verwendung im IMA SDK ein:- Standort
- Die Google Cloud-Region, in der Ihre Live-Konfiguration erstellt wurde:
LOCATION - Projektnummer
- Die Google Cloud-Projektnummer, die die Video Stitcher API verwendet:
PROJECT_NUMBER - OAuth-Token
Ein kurzlebiges OAuth-Token eines Dienstkontos mit der Nutzerrolle „Video Stitcher“:
OAUTH_TOKEN
Weitere Informationen finden Sie unter Kurzlebige Anmeldedaten für Dienstkonten erstellen. Das OAuth-Token kann für mehrere Anfragen wiederverwendet werden, solange es nicht abgelaufen ist.
- Netzwerkcode
Der Ad Manager-Netzwerkcode für die Anzeigenanfrage:
NETWORK_CODE
- Live-Konfigurations-ID
- Die ID der Live-Konfiguration, die Sie beim Erstellen des Livestream-Ereignisses angegeben haben:
LIVE_CONFIG_ID - Benutzerdefinierter Asset-Schlüssel
- Der benutzerdefinierte Ad Manager-Asset-Schlüssel, der beim Erstellen einer Konfiguration für ein Livestream-Ereignis mit der Video Stitcher API generiert wurde:
CUSTOM_ASSET_KEY
Entwicklungsumgebung konfigurieren
In den IMA-Beispiel-Apps werden nur HLS-Streamanfragen demonstriert. Sie können beim Erstellen der VideoStitcherLiveStreamRequest-Klasse weiterhin DASH-Streams verwenden. Wenn Sie Ihren DASH-kompatiblen Player einrichten, müssen Sie einen Listener für die Fortschrittsereignisse Ihres Videoplayers einrichten, der die Metadaten des Videos an StreamManager.processMetadata() weitergeben kann.
Diese Funktion akzeptiert drei Parameter:
type: Ein String, der für HLS-Streams auf'ID3'und für DASH-Streams auf'urn:google:dai:2018'festgelegt werden muss.data: Bei DASH-Ereignisnachrichten ist dies der String mit den Nachrichtendaten.timestamp: Eine Zahl, die die Startzeit der Ereignisnachricht für DASH-Streams angibt.
Senden Sie die Metadaten so schnell und so oft, wie es Ihre Player-Ereignisse zulassen. Wenn Metadaten fehlen oder nicht korrekt sind, werden vom IMA DAI SDK möglicherweise keine Anzeigenereignisse ausgelöst, was zu fehlerhaften Berichten über Anzeigenereignisse führt.
Laden Sie die IMA-Beispiele für die dynamische Anzeigenbereitstellung für HTML5 herunter und extrahieren Sie das einfache HLS.js-Beispiel in einen neuen Ordner. Dieses Beispiel ist eine Webanwendung, die Sie zu Testzwecken lokal hosten können.
Wenn Sie das Beispiel lokal hosten möchten, rufen Sie den neuen Ordner auf und führen Sie den folgenden Python-Befehl aus, um einen Webserver zu starten:
python3 -m http.server 8000http.server ist nur in Python 3.x verfügbar. Sie können einen beliebigen anderen Webserver verwenden, z. B. den Apache HTTP Server oder Node JS.
Öffnen Sie einen Webbrowser und rufen Sie localhost:8000 auf, um einen Videoplayer zu sehen.
Ihr Browser muss die HLS.js-Bibliothek unterstützen.
Wenn alles ordnungsgemäß funktioniert, wird nach einem kurzen Werbespot der Kurzfilm „Tears of Steel“ abgespielt, sobald du im Videoplayer auf die Wiedergabeschaltfläche klickst. Diese Inhalte werden über einen Video-on-Demand-Stream (VOD) bereitgestellt.
Livestream anfordern
Wenn Sie den VOD-Beispielstream durch Ihren Livestream ersetzen möchten, verwenden Sie die Klasse VideoStitcherLiveStreamRequest, die automatisch eine Anzeigensitzung mit Google Ad Manager erstellt. In der Google Ad Manager-Benutzeroberfläche können Sie die generierten DAI-Sitzungen für das Monitoring und die Fehlerbehebung finden.
Im vorhandenen Beispiel gibt es Funktionen zum Anfordern eines VOD-Streams oder eines Livestreams. Damit die Funktion mit der Google Cloud Video Stitcher API funktioniert, müssen Sie eine neue Funktion hinzufügen, die ein VideoStitcherLiveStreamRequest-Objekt zurückgibt.
Beispiel:
// StreamManager which will be used to request ad-enabled streams.
let streamManager;
...
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(
videoElement,
adUiElement
);
streamManager.addEventListener(
[
google.ima.dai.api.StreamEvent.Type.LOADED,
google.ima.dai.api.StreamEvent.Type.ERROR,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
],
onStreamEvent, false);
hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
if (streamManager && data) {
// For each ID3 tag in our metadata, we pass in the type - ID3, the
// tag data (a byte array), and the presentation timestamp (PTS).
data.samples.forEach(function(sample) {
streamManager.processMetadata('ID3', sample.data, sample.pts);
});
}
});
videoElement.addEventListener('pause', () => {
playButton.style.display = 'block';
});
playButton.addEventListener('click', initiatePlayback);
}
function initiatePlayback() {
requestVideoStitcherStream();
playButton.style.display = "none";
playButton.removeEventListener('click', initiatePlayback);
playButton.addEventListener('click', resumePlayback);
}
...
function requestVideoStitcherStream() {
const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
streamRequest.region = 'LOCATION';
streamRequest.projectNumber = 'PROJECT_NUMBER';
streamRequest.oAuthToken = 'OAUTH_TOKEN';
streamRequest.networkCode = 'NETWORK_CODE';
streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';
streamManager.requestStream(streamRequest);
}
Wenn sich die Livestream-Dateien für lokale Tests in einem Cloud Storage
-Bucket befinden, müssen Sie CORS für den Ursprung
http://localhost:8000 aktivieren.
Aktualisieren Sie die Seite. Anschließend kannst du benutzerdefinierte Livestreams anfordern und abspielen.
Optional: Optionen für die Streamingsitzung hinzufügen
Sie können Ihre Streamanfrage anpassen, indem Sie Sitzungsoptionen hinzufügen, um die Standardkonfiguration der Cloud Video Stitcher API mit VideoStitcherLiveStreamRequest.videoStitcherSessionOptions zu überschreiben.
Wenn Sie eine nicht erkannte Option angeben, antwortet die Cloud Video Stitcher API mit einem HTTP-400-Fehler. Weitere Informationen finden Sie im Leitfaden zur Fehlerbehebung.
Sie können beispielsweise die Manifestoptionen mit dem folgenden Code-Snippet überschreiben, das zwei Stream-Manifeste mit Wiedergaben anfordert, die von der niedrigsten bis zur höchsten Bitrate sortiert sind.
...
// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
"manifestOptions": {
"bitrateOrder": "ascending"
}
};
streamManager.requestStream(streamRequest);
Werbeunterbrechung einfügen
Die Google Cloud Video Stitcher API fügt Anzeigen ein, die für jede Werbeunterbrechung über das Anzeigen-Tag abgerufen werden. Werbeunterbrechungen werden im Manifest durch Anzeigenmarkierungen gekennzeichnet. Anzeigenmarkierungen werden vom Livestream-Encoder eingefügt.
Wenn Sie Ihren eigenen Livestream verwenden, müssen Sie die Anzeigenmarkierung einfügen. Weitere Informationen zu den unterstützten HLS- und DASH-Anzeigenmarkierungen finden Sie in der Dokumentation zu Anzeigenmarkierungen.
Wenn Sie einen Livestream mit der Google Cloud Livestream API erstellt haben, fügen Sie ein Kanalereignis für eine Werbeunterbrechung ein.
Die Anzeige wird sofort nach dem Einfügen der Werbeunterbrechung abgespielt.
Bereinigen
Nachdem Sie einen Livestream mit der Google Cloud Video Stitcher API gehostet und mit dem IMA DAI SDK für HTML5 angefordert haben, sollten Sie alle Bereitstellungsressourcen bereinigen.
Folgen Sie der Anleitung zum Bereinigen von Livestreams, um nicht benötigte Ressourcen und Assets zu entfernen.
Verwenden Sie schließlich im Terminalfenster, in dem Sie den Python 3-Webserver gestartet haben, den Befehl ctrl+C, um den lokalen Server zu beenden.