Wenn du das IMA SDK verwendest, gibt es zwei separate Videoplayer: deinen Inhaltsvideoplayer und den Anzeigenplayer. Das SDK verwaltet automatisch das Overlay des Anzeigenplayers über dem Videoplayer des Inhalts. Daher funktioniert es nicht, dem Videoplayer direkt Event-Listener hinzuzufügen. Eine Lösung besteht darin, den Anzeigencontainer ein- und auszublenden. Dies kann jedoch die SDK-Funktionen beeinträchtigen. Eine bessere Lösung besteht darin, beide Spieler in einem übergeordneten div-Element zu verpacken und diesem Event-Listener hinzuzufügen.
In diesem Leitfaden zeigen wir Ihnen, wie das geht.
Vorbereitung
- HTML5-Videoplayer mit integriertem IMA HTML5 SDK Wenn du noch keins hast, lies den Hilfeartikel IMA SDK einrichten.
HTML-Code ändern
Sie müssen zuerst Ihren HTML-Code ändern, um einen div-Tag hinzuzufügen, der sowohl den Anzeigen- als auch den Videoplayer umschließt. Unter „IMA SDK einrichten“ ist das bereits für dich erledigt. Du musst nur mainContainer angeben:
... <div id="mainContainer"> <div id="content"> <video id="contentElement"> <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"> </video> </div> <div id="adContainer"></div> </div> ...
JavaScript-Code mit Ereignis-Listenern ergänzen
Fügen Sie Ihrem JavaScript-Code dann Ereignis-Listener hinzu, um beispielsweise zu erkennen, wenn ein Nutzer auf das Video klickt. Beispielsweise in ads.js:
...
function init() {
videoContent = document.getElementById('contentElement');
mainContainer = document.getElementById('mainContainer');
mainContainer.addEventListener('click', function() { alert('I was clicked!');});
...
}
...Geschafft! Du kannst auf das Video klicken und das Pop-up wird angezeigt, unabhängig davon, ob eine Anzeige wiedergegeben wird. Klicks auf Anzeigen funktionieren weiterhin.
Jetzt ausprobieren
Unten sehen Sie eine funktionierende Implementierung.