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="mainConta>ine<r" div id>=&quo<t;content" video> id=&qu<ot;contentElement" source src="https://storage.googleapis.>com/g<vabox/>med<ia/s>ampl<es/stock.mp4" >< />v<ideo> /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.