Lorsque vous utilisez le SDK IMA, il existe deux lecteurs vidéo distincts : votre lecteur vidéo de contenu et le lecteur d'annonces. Le SDK gère automatiquement la superposition du lecteur d'annonces sur le lecteur vidéo du contenu. Par conséquent, l'ajout d'écouteurs d'événements au lecteur vidéo directement ne fonctionne pas. Une solution consiste à afficher et à masquer le conteneur d'annonces, mais cela peut interférer avec le fonctionnement du SDK. Il est préférable d'encapsuler les deux joueurs dans un élément div parent et d'y associer des écouteurs d'événements.
Ce guide vous explique comment procéder.
Conditions préalables
- Lecteur vidéo HTML5 avec SDK IMA HTML5 intégré Si vous n'en avez pas, consultez notre guide de démarrage.
Modifier votre code HTML
Vous devez d'abord modifier votre code HTML pour ajouter un div encapsulant à la fois le lecteur d'annonces et le lecteur vidéo de contenu. Dans le guide de démarrage, cette opération a déjà été effectuée avec mainContainer:
... <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> ...
Ajouter des écouteurs d'événements à JavaScript
Ajoutez ensuite des écouteurs d'événements à votre code JavaScript, par exemple pour détecter un utilisateur qui clique sur la vidéo. Par exemple, dans ads.js :
...
function init() {
videoContent = document.getElementById('contentElement');
mainContainer = document.getElementById('mainContainer');
mainContainer.addEventListener('click', function() { alert('I was clicked!');});
...
}
...
Et voilà ! Lorsque vous cliquez sur la vidéo, le pop-up s'affiche, qu'une annonce soit en cours de lecture ou non, et les clics sur les annonces fonctionnent toujours.
Essayer
Vous pouvez voir une implémentation fonctionnelle ci-dessous.