Ao usar o SDK do IMA, há dois players de vídeo separados: o player de vídeo
de conteúdo e o player de anúncios. O SDK gerencia automaticamente a sobreposição do player de
anúncios sobre o player de vídeo de conteúdo. Como resultado, adicionar listeners de eventos diretamente ao
player de vídeo não funciona. 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 é
envolver os dois jogadores em uma div pai e anexar 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, consulte Configurar o SDK do IMA.
Modificar o HTML
Primeiro, você precisa mudar o HTML para adicionar um div que envolva o
player de anúncios e o player de vídeo de conteúdo. Em *Configurar o SDK do IMA*, 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 código JavaScript, como para detectar um
clique do usuário 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, mesmo que um anúncio esteja sendo reproduzido e ainda tenha impressões do anúncio.
Faça um teste
Confira uma implementação funcional abaixo.