При использовании IMA SDK есть два отдельных видеопроигрывателя: видеопроигрыватель вашего контента и проигрыватель рекламы. SDK автоматически управляет наложением проигрывателя рекламы на проигрыватель видеоконтента. В результате добавление прослушивателей событий напрямую в видеоплеер не работает. Одним из обходных путей является отображение и скрытие рекламного контейнера, но это может помешать работе SDK. Лучшее решение — обернуть обоих игроков в родительский элемент div и прикрепить к нему прослушиватели событий. В этом руководстве показано, как это сделать.
Предварительные условия
- Видеопроигрыватель HTML5 со встроенным IMA HTML5 SDK. Если у вас его нет, ознакомьтесь с нашим руководством по началу работы .
Измените свой HTML
Сначала вам нужно изменить свой HTML, чтобы добавить div , обертывающий как проигрыватель рекламы, так и проигрыватель видеоконтента. В руководстве по началу работы это уже сделано за вас с помощью 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!');});
...
}
...Вот и все! Вы можете нажать на видео и увидеть всплывающее окно, независимо от того, воспроизводится ли реклама, и при этом переходы по рекламе будут работать.
Попробуйте это
Ниже вы можете увидеть рабочую реализацию.