Отслеживание кликов мыши

При использовании IMA SDK есть два отдельных видеопроигрывателя: для контента и для объявлений. SDK автоматически управляет наложением проигрывателя объявления на видеопроигрыватель контента. Поэтому добавление прослушивателей событий непосредственно в видеопроигрыватель не работает. Один из способов обойти эту проблему – показывать и скрывать контейнер объявлений, но это может помешать работе SDK. Лучше поместить оба проигрывателя в родительский элемент div и прикрепить прослушиватели событий к нему. В этом руководстве рассказывается, как это сделать.

Требования

  • Видеопроигрыватель HTML5 с интегрированным IMA HTML5 SDK. Если у вас его нет, ознакомьтесь с информацией о том, как настроить IMA SDK.

Как изменить HTML-код

Сначала нужно изменить HTML-код, добавив тег div, который будет содержать как проигрыватель объявлений, так и видеопроигрыватель контента. В разделе "Настройте IMA SDK" это уже сделано с помощью 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>
...

Как добавить прослушиватели событий в код JavaScript

Затем добавьте в код JavaScript прослушиватели событий, например для обнаружения клика пользователя по видео. Например, в ads.js: 

...
function init() {
  videoContent = document.getElementById('contentElement');
  mainContainer = document.getElementById('mainContainer');
  mainContainer.addEventListener('click', function() { alert('I was clicked!');});
  ...
}
...

Готово! Вы можете нажать на видео и увидеть всплывающее окно независимо от того, показывается ли реклама. При этом клики по объявлениям будут работать.

Попробовать

Ниже приведен пример реализации.