Rastreamento de cliques do mouse

Ao usar o SDK do IMA, há dois players de vídeo separados: o de conteúdo e o de anúncios. O SDK gerencia automaticamente a sobreposição do player de anúncios sobre o player de vídeo do conteúdo. Como resultado, não é possível adicionar listeners de eventos diretamente ao player de vídeo. Uma solução alternativa é mostrar e ocultar o contêiner de anúncios, mas isso pode interferir na funcionalidade do SDK. Uma solução melhor é encapsular os dois jogadores em um div pai e anexar listeners de eventos a ele. Veja neste guia como fazer isso.

Pré-requisitos

• Player de vídeo HTML5 com o SDK HTML5 do IMA integrado. Se você não tiver uma, consulte nosso Guia explicativo.

Modificar seu HTML

Primeiro, você precisa mudar o HTML para adicionar um div que envolva o player de anúncios e o de vídeo de conteúdo. No Guia explicativo, isso já foi feito com 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>
...

Adicionar listeners de eventos ao JavaScript

Em seguida, adicione listeners de eventos ao seu código JavaScript, como para detectar um usuário clicando no vídeo. Por exemplo, em ads.js:

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

Pronto! Você pode clicar no vídeo e ver o pop-up aparecer, independentemente de um anúncio estar sendo reproduzido e ainda ter cliques no anúncio.

Testar

Confira abaixo uma implementação em funcionamento.