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="mainConta>ine<r" div id>=&quo<t;content" video> id=&qu<ot;contentElement" source src="https://storage.googleapis.>com/g<vabox/>med<ia/s>ampl<es/stock.mp4" >< />v<ideo> /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.