Quando utilizzi l'SDK IMA, sono presenti due video player distinti: il video player dei contenuti e il player dell'annuncio. L'SDK gestisce automaticamente l'overlay del player dell'annuncio
al video player dei contenuti. Di conseguenza, l'aggiunta diretta di listener di eventi al video player non funziona. Una soluzione alternativa è mostrare e nascondere il
contenitore di annunci, ma questa operazione può interferire con la funzionalità dell'SDK. Una soluzione migliore è
aggregare entrambi i player in un elemento div padre e collegare listener di eventi a questo.
Questa guida ti spiega come fare.
Prerequisiti
- Video player HTML5 con SDK IMA per HTML5 integrato. Se non ne hai uno, consulta la nostra Guida introduttiva.
Modificare il codice HTML
Innanzitutto, devi modificare il codice HTML per aggiungere un div di wrapping sia
del player degli annunci sia del video player dei contenuti. Nella Guida introduttiva, questa operazione è già stata eseguita 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> ...
Aggiunta di listener di eventi a JavaScript
Poi, aggiungi listener di eventi al codice JavaScript, ad esempio per rilevare 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 dal fatto che l'annuncio sia in riproduzione e che i clic sugli annunci continuino a funzionare.
Prova
Di seguito puoi vedere un'implementazione funzionante.