Śledzenie kliknięć myszy

Jeśli korzystasz z pakietu IMA SDK, masz do wyboru 2 osobne odtwarzacze wideo. z odtwarzaczem wideo i odtwarzaczem reklam. Pakiet SDK automatycznie zarządza nakładaniem reklam nad odtwarzaczem. W związku z tym dodanie detektorów zdarzeń do nie działa bezpośrednio odtwarzacz wideo. Jednym z rozwiązań tymczasowych jest wyświetlenie i ukrycie reklamy. kontenera, ale może to zakłócać działanie pakietu SDK. Lepszym rozwiązaniem jest umieść obu graczy w nadrzędnym elemencie div i dołącz do niego detektory zdarzeń. Z tego przewodnika dowiesz się, jak to zrobić.

Wymagania wstępne

• Odtwarzacz wideo HTML5 ze zintegrowanym pakietem IMA HTML5 SDK. Jeśli nie masz jeszcze konta, zapoznaj się z przewodnikiem dla początkujących.

Modyfikowanie kodu HTML

Najpierw musisz zmienić kod HTML, aby dodać kod div do obu tagów z odtwarzacza reklam i odtwarzaczy treści. W przewodniku dla początkujących jest to już zrobiono dla Ciebie w 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ń, takie jak wykrywanie po kliknięciu filmu. Na przykład w pliku 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 i pojawi się wyskakujące okienko niezależnie od tego, czy reklama jest odtwarzana, ale klikalność reklamy działa.

Wypróbuj

Poniżej możesz zobaczyć działającą implementację.