Quando utilizzi l'SDK IMA, esistono due video player distinti, ovvero i contenuti
nel video player e nel player degli annunci. L'SDK gestisce automaticamente la sovrapposizione dell'annuncio
player sopra il video player di contenuti. Di conseguenza, l'aggiunta di listener di eventi alla
direttamente il video player non funziona. Una soluzione alternativa è mostrare e nascondere l'annuncio
ma questo può interferire con la funzionalità dell'SDK. Una soluzione migliore è
aggrega entrambi i player in un elemento div principale e allega i listener di eventi a quest'ultimo.
Questa guida ti mostra come fare.
Prerequisiti
- Video player HTML5 con l'SDK IMA per HTML5 integrato. Se non ne hai uno, consulta la nostra Guida introduttiva.
Modifica il codice HTML
Innanzitutto devi modificare il codice HTML per aggiungere un wrapping div
il player dell'annuncio e il video player di contenuti. Nella Guida introduttiva, questo è già
fatto per te 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> ...
Aggiungere listener di eventi a JavaScript
Successivamente, aggiungi listener di eventi al codice JavaScript, ad esempio per rilevare una
a un utente che fa clic sul video. Ad esempio, in ads.js:
...
function init() {
videoContent = document.getElementById('contentElement');
mainContainer = document.getElementById('mainContainer');
mainContainer.addEventListener('click', function() { alert('I was clicked!');});
...
}
...
È tutto. Puoi fare clic sul video e visualizzare il popup indipendentemente da come se un annuncio è in riproduzione e i clickthrough sull'annuncio continuano a funzionare.
Prova
Di seguito puoi vedere un'implementazione funzionante.