Pakiet IMA SDK udostępnia 2 osobne odtwarzacze wideo: odtwarzacz wideo z treścią i odtwarzacz reklam. SDK automatycznie zarządza nakładaniem
reklam na odtwarzacz wideo. W rezultacie dodawanie detektorów zdarzeń bezpośrednio do odtwarzacza wideo nie działa. Jednym z rozwiązań tymczasowych jest wyświetlanie i ukrywanie kontenera reklam, ale może to zakłócić działanie pakietu SDK. Lepszym rozwiązaniem jest umieszczenie obu odtwarzaczy w nadrzędnym elemencie div i dołączenie do niego detektorów zdarzeń.
Z tego przewodnika dowiesz się, jak to zrobić.
Wymagania wstępne
- Odtwarzacz wideo HTML5 ze zintegrowanym pakietem IMA HTML5 SDK. Jeśli go nie masz, zapoznaj się z przewodnikiem dla początkujących.
Modyfikowanie kodu HTML
Najpierw musisz zmienić kod HTML, aby dodać element div zawijający zarówno odtwarzacz reklam, jak i odtwarzacz treści. W przewodniku dla początkujących masz już tę czynność zainicjowaną w usłudze 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> ...
Dodawanie detektorów zdarzeń do kodu JavaScript
Następnie dodaj do kodu JavaScript detektory zdarzeń – np. wykrywające kliknięcia filmu przez użytkownika. Na przykład w ads.js:
...
function init() {
videoContent = document.getElementById('contentElement');
mainContainer = document.getElementById('mainContainer');
mainContainer.addEventListener('click', function() { alert('I was clicked!');});
...
}
...
Znakomicie. Gdy klikniesz film, pojawi się wyskakujące okienko niezależnie od tego, czy reklama się odtwarza i czy klikalność reklamy.
Wypróbuj
Poniżej znajdziesz działającą implementację.