Seguimiento de clics del mouse

Cuando se usa el SDK de IMA, hay dos reproductores de video independientes, el contenido el reproductor de video y el de anuncios. El SDK administra automáticamente la superposición del anuncio sobre el reproductor de video de contenido. Por lo tanto, agregar objetos de escucha de eventos al el reproductor de video directamente no funciona. Una solución alternativa es mostrar y ocultar el anuncio pero esto puede interferir en la funcionalidad del SDK. Una mejor solución es une ambos reproductores en una div superior y adjunta objetos de escucha de eventos a ella. En esta guía, se explica cómo hacerlo.

Requisitos previos

• Reproductor de video HTML5 con el SDK de IMA HTML5 integrado Si no tienes una, consulta nuestra guía de introducción.

Modifica tu HTML

Primero, debes cambiar tu código HTML para agregar una etiqueta div que une ambos el reproductor de anuncios y el de video de contenido. En la Guía de introducción, esto ya es hecho por ti con 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>
...

Cómo agregar objetos de escucha de eventos a tu JavaScript

A continuación, agrega objetos de escucha de eventos a tu código JavaScript, por ejemplo, para detectar un cuando un usuario hace clic en el video. Por ejemplo, en ads.js:

...
function init() {
  videoContent = document.getElementById('contentElement');
  mainContainer = document.getElementById('mainContainer');
  mainContainer.addEventListener('click', function() { alert('I was clicked!');});
  ...
}
...

Eso es todo. Puedes hacer clic en el video y ver que la ventana emergente aparece, independientemente de si un anuncio se está reproduciendo y aún funcionan los clics en el anuncio.

Probar

A continuación, puedes ver una implementación funcional.