Rastreamento de cliques do mouse

Ao usar o SDK do IMA, há dois players de vídeo separados: seu conteúdo o player de vídeo e o player de anúncios. O SDK gerencia automaticamente a sobreposição do anúncio sobre o player de vídeo do conteúdo. Como resultado, adicionar listeners de eventos ao o player de vídeo do YouTube não funciona. Uma solução é mostrar e ocultar o anúncio mas isso pode interferir na funcionalidade do SDK. Uma solução melhor é envolva os dois players em uma div mãe e anexe listeners de eventos a ela. Este guia mostra como fazer isso.

Pré-requisitos

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

Modificar seu HTML

Primeiro, mude o HTML para adicionar um div unindo os elementos o player de anúncio e o player de vídeo do conteúdo. No Guia explicativo, isso já está feito para você 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, por exemplo, para detectar uma 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 se um anúncio está sendo reproduzido e ainda tem os cliques no anúncio.

Faça um teste

Confira abaixo uma implementação funcional.