Suivre les clics de la souris

Lorsque vous utilisez le SDK IMA, deux lecteurs vidéo distincts sont disponibles : le lecteur vidéo de votre 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 directement au lecteur vidéo ne fonctionne pas. Une solution consiste à afficher et à masquer le conteneur d'annonces, mais cela peut interférer avec le fonctionnement du SDK. Une meilleure solution consiste à encapsuler les deux lecteurs dans un div parent et à y associer des écouteurs d'événements. Ce guide vous explique comment procéder.

Prérequis

• Lecteur vidéo HTML5 avec le SDK IMA pour HTML5 intégré Si vous n'en avez pas, consultez Configurer le SDK IMA.

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 "Configurer le SDK IMA", cela est déjà fait pour vous 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 à votre code 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à ! Vous pouvez cliquer sur la vidéo pour que le pop-up s'affiche, que l'annonce soit diffusée ou non, et que les clics sur les annonces fonctionnent.

Essayer

Vous trouverez ci-dessous une implémentation fonctionnelle.