Mit IMA SDKs können Sie Multimedia-Anzeigen ganz einfach in Ihre Websites und Apps einbinden. IMA SDKs können Anzeigen von beliebigen <ph type="x-smartling-placeholder"></ph> VAST-kompatiblen Ad-Server bereitstellen und die Anzeigenwiedergabe in Ihren Apps verwalten. Mit IMA SDKs für die dynamische Anzeigenbereitstellung Streamanfrage für Anzeigen- und Contentvideo (VOD- oder Livecontent) Das SDK gibt dann kombinierten Videostream, sodass Sie nicht zwischen Anzeige und Contentvideo wechseln müssen. in Ihrer App.
Gewünschte Lösung für die dynamische Anzeigenbereitstellung auswählen
Dynamische Anzeigenbereitstellung mit Komplettservice
In diesem Leitfaden wird gezeigt, wie Sie das IMA DAI SDK in ein einfaches Video integrieren. Player-App. Wenn Sie ein fertiges Beispiel ansehen oder mitarbeiten möchten -Integration, laden Sie die einfaches Beispiel von GitHub.
Dynamische Anzeigenbereitstellung mit IMA – Übersicht
Die Implementierung des IMA DAI SDK umfasst zwei Hauptkomponenten: diesem Leitfaden:
StreamRequest
: entwederVODStreamRequest
oderLiveStreamRequest
: Ein Objekt, das eine Streamanfrage definiert. Streamanfragen können entweder für On-Demand-Videos oder für Livestreams gelten. Streams. Anfragen geben eine Content-ID sowie einen API-Schlüssel oder ein Authentifizierungstoken und andere Parameter.StreamManager
: Ein Objekt, das Streams zur dynamischen Anzeigenbereitstellung und Interaktionen mit dem Back-End für die dynamische Anzeigenbereitstellung verarbeitet. Die Stream Manager verarbeitet außerdem Tracking-Pings und leitet Stream- und Anzeigenereignisse an den Publisher.
Vorbereitung
- Drei leere Dateien
<ph type="x-smartling-placeholder">
- </ph>
- dai.html
- dai.css
- dai.js
- Python ist auf Ihrem Computer oder ein Webserver zum Testen installiert
Entwicklungsteam starten
Weil das IMA DAI SDK Abhängigkeiten mit demselben Protokoll wie die Seite lädt, von dem sie geladen wird, müssen Sie Ihre Anwendung mit einem Webserver testen. A können Sie schnell einen lokalen Entwicklungsserver starten, indem Sie Server.
Über eine Befehlszeile aus dem Verzeichnis, das die Datei
index.html
enthält ausführen:python -m http.server 8000
Rufe in einem Webbrowser
http://localhost:8000/
auf.Sie können auch einen beliebigen anderen Webserver verwenden, beispielsweise den Apache HTTP Server:
Einfachen Videoplayer erstellen
Ändern Sie zuerst dai.html, um ein einfaches HTML5-Videoelement und ein div-Element zu erstellen, das
Klick verwendet werden soll. Fügen Sie außerdem die erforderlichen Tags zum Laden von dai.css hinzu.
und dai.js-Dateien zu speichern und den hls.js
-Videoplayer zu importieren. Gehen Sie dann so vor:
Ändern Sie dai.css, um die Größe und Position der Seitenelemente anzugeben.
Definieren Sie schließlich in dai.js Variablen für die Streamanfrage.
und einer initPlayer()
-Funktion, die beim Laden der Seite ausgeführt wird.
dai.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
<h2>IMA DAI SDK DAI Demo (HLS.JS)</h2>
<video id="video"></video>
<div id="ad-ui"></div>
</body>
</html>
dai.css
#video,
#ad-ui {
width: 640px;
height: 360px;
position: absolute;
top: 35px;
left: 0;
}
#ad-ui {
cursor: pointer;
}
dai.js
var BACKUP_STREAM =
'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'
// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";
// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";
var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
}
IMA DAI SDK laden
Als Nächstes fügen Sie das IMA-Framework mithilfe eines Skript-Tags in dai.html vor dem Tag hinzu. für dai.js.
dai.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css">
</head>
StreamManager initialisieren und Streamanfrage stellen
Um eine Gruppe von Anzeigen anzufordern, erstellen Sie eine ima.dai.api.StreamManager
, die
ist für das Anfordern und Verwalten von Streams für die dynamische Anzeigenbereitstellung zuständig. Der Konstruktor nimmt eine
und in der sich daraus ergebenden Instanz wird ein UI-Element
zur Verarbeitung der Anzeige verwendet.
Klicks.
Definieren Sie dann Funktionen, die Streams anfordern. Dieses Beispiel enthält Funktionen für
VOD und Livestreams, die Instanzen von VODStreamRequest
und
LiveStreamRequest
und rufen Sie dann streamManager.requestStream()
auf
mit den Parametern streamRequest
. Für Livestreams musst du außerdem eine
Handler zum Abhören zeitgesteuerter Metadatenereignisse und Weiterleiten der Ereignisse an den
StreamManager
Sie können den Code entsprechend Ihrem Anwendungsfall kommentieren oder die Kommentarzeichen entfernen.
Für beide Methoden wird ein optionaler API-Schlüssel verwendet. Wenn Sie einen geschützten Stream verwenden,
muss
Erstellen Sie einen Authentifizierungsschlüssel für die dynamische Anzeigenbereitstellung.
In diesem Beispiel ist keiner der Streams geschützt. Deshalb wird apiKey
nicht verwendet.
dai.js
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)
// Timed metadata is only used for LIVE streams.
hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
if (streamManager && data) {
// For each ID3 tag in the metadata, 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);
});
}
});
requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
// Uncomment the line below and comment out the one above to request a
// LIVE stream instead of a VOD stream.
//requestLiveStream(TEST_ASSET_KEY, null);
}
function requestVODStream(cmsId, videoId, apiKey) {
var streamRequest = new google.ima.dai.api.VODStreamRequest();
streamRequest.contentSourceId = cmsId;
streamRequest.videoId = videoId;
streamRequest.apiKey = apiKey;
streamManager.requestStream(streamRequest);
}
function requestLiveStream(assetKey, apiKey) {
var streamRequest = new google.ima.dai.api.LiveStreamRequest();
streamRequest.assetKey = assetKey;
streamRequest.apiKey = apiKey;
streamManager.requestStream(streamRequest);
}
Streamereignisse verarbeiten
Schließlich müssen Sie Ereignis-Listener für wichtige Videoereignisse implementieren. Dieses
in einem einfachen Beispiel verarbeitet werden: LOADED
, ERROR
, AD_BREAK_STARTED
und
AD_BREAK_ENDED
durch Aufrufen einer onStreamEvent()
-Funktion. Diese Funktion
das Laden von Streams und Fehler behandelt und die Steuerelemente des Videoplayers deaktiviert werden.
während eine Anzeige wiedergegeben wird. Dies ist für das SDK erforderlich. Wenn der Stream
geladen wird, lädt der Videoplayer die angegebene URL und gibt sie über ein loadUrl()
-Element wieder
.
Sie können auch Ereignis-Listener für pause
des Videoelements einrichten.
und start
-Ereignisse, damit der Nutzer die Wiedergabe fortsetzen kann, wenn das IMA SDK pausiert wird
in Werbepausen.
Damit die dynamische Anzeigenbereitstellung verwendet werden kann, muss Ihr benutzerdefinierter Player ID3-Ereignisse für Livestreams übergeben den IMA SDKs für die dynamische Anzeigenbereitstellung hinzugefügt werden, wie im Beispielcode dargestellt.
dai.js
var isAdBreak;
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
videoElement.addEventListener('pause', onStreamPause);
videoElement.addEventListener('play', onStreamPlay);
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);
...
function onStreamEvent(e) {
switch (e.type) {
case google.ima.dai.api.StreamEvent.Type.LOADED:
console.log('Stream loaded');
loadUrl(e.getStreamData().url);
break;
case google.ima.dai.api.StreamEvent.Type.ERROR:
console.log('Error loading stream, playing backup stream.' + e);
loadUrl(BACKUP_STREAM);
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
console.log('Ad Break Started');
isAdBreak = true;
videoElement.controls = false;
adUiElement.style.display = 'block';
break;
case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
console.log('Ad Break Ended');
isAdBreak = false;
videoElement.controls = true;
adUiElement.style.display = 'none';
break;
default:
break;
}
}
function loadUrl(url) {
console.log('Loading:' + url);
hls.loadSource(url);
hls.attachMedia(videoElement);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
console.log('Video Play');
videoElement.play();
});
}
function onStreamPause() {
console.log('paused');
if (isAdBreak) {
videoElement.controls = true;
adUiElement.style.display = 'none';
}
}
function onStreamPlay() {
console.log('played');
if (isAdBreak) {
videoElement.controls = false;
adUiElement.style.display = 'block';
}
}
Fertig! Sie fordern jetzt Anzeigen mit dem IMA DAI SDK an und schalten diese ein. Bis Informationen zu erweiterten SDK-Funktionen finden Sie in den anderen Leitfäden oder in den Beispiele auf GitHub