Wenn Sie das IMA SDK verwenden, sind zwei separate Videoplayer vorhanden: der Contentvideoplayer und der Ad Player. Das SDK verwaltet automatisch das Einblenden des Anzeigenplayers über dem Videoplayer. Daher funktioniert das direkte Hinzufügen von Ereignis-Listenern zum Videoplayer nicht. Eine Problemumgehung besteht darin, den Anzeigencontainer ein- und auszublenden. Dies kann jedoch die SDK-Funktionen beeinträchtigen. Eine bessere Lösung besteht darin, beide Player in eine übergeordnete div zu packen und an diese Ereignis-Listener anzuhängen.
In diesem Leitfaden erfahren Sie, wie das geht.
Voraussetzungen
- HTML5-Videoplayer mit integriertem IMA HTML5 SDK Falls Sie noch keines haben, lesen Sie unseren Startleitfaden.
HTML ändern
Zuerst müssen Sie den HTML-Code ändern, um einen div einzufügen, der sowohl den Ad-Player als auch den Content-Videoplayer umschließt. Im Startleitfaden wurde dies bereits mit mainContainer erledigt:
... <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> ...
Ereignis-Listener zu JavaScript hinzufügen
Als Nächstes fügen Sie Ihrem JavaScript-Code Ereignis-Listener hinzu, um beispielsweise zu erkennen, wenn ein Nutzer auf das Video klickt. Beispiel in ads.js:
...
function init() {
videoContent = document.getElementById('contentElement');
mainContainer = document.getElementById('mainContainer');
mainContainer.addEventListener('click', function() { alert('I was clicked!');});
...
}
...
Fertig! Wenn Sie auf das Video klicken, wird das Pop-up-Fenster eingeblendet, unabhängig davon, ob eine Anzeige wiedergegeben wird und ob Klicks auf Anzeigen dennoch möglich sind.
Ausprobieren
Unten sehen Sie eine funktionierende Implementierung.