Śledzenie kliknięć myszką

W przypadku pakietu IMA SDK są 2 osobne odtwarzacze wideo: odtwarzacz treści i odtwarzacz reklam. Pakiet SDK automatycznie zarządza nakładaniem odtwarzacza reklamy na odtwarzacz treści. W związku z tym dodawanie odbiorników zdarzeń bezpośrednio do odtwarzacza wideo nie działa. Jednym z rozwiązań jest wyświetlanie i ukrywanie kontenera reklamy, ale może to zakłócać działanie pakietu SDK. Lepszym rozwiązaniem jest owinięcie obu graczy w element nadrzędny div i dołączenie do niego detektorów zdarzeń. Z tego przewodnika dowiesz się, jak to zrobić.

Wymagania wstępne

• Odtwarzacz wideo HTML5 z zintegrowanym pakietem IMA HTML5 SDK. Jeśli nie masz pakietu, zapoznaj się z artykułem Konfigurowanie pakietu IMA SDK.

Modyfikowanie kodu HTML

Najpierw musisz zmienić kod HTML, aby dodać element divobejmujący odtwarzacz reklamy i odtwarzacz filmu z treściami. W sekcji *Konfigurowanie pakietu IMA SDK* te czynności zostały już wykonane dla Ciebie: 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 JavaScriptu odbiorniki zdarzeń, np. do wykrywania kliknięć 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. Możesz kliknąć film, aby wyświetlić wyskakujące okienko, niezależnie od tego, czy reklama jest odtwarzana i czy kliknięcia reklamy nadal działają.

Wypróbuj

Poniżej znajdziesz działające rozwiązanie.