В настоящее время практически все веб-сайты, специализирующиеся на показе видеоконтента, осуществляют вставку рекламного содержимого в свои видеоматериалы. Хотя говорить о грядущем массовом отказе от использования Adobe Flash Player в этой области не приходится, но отметить стоит, что продолжает расти интерес к возможностям, предоставляемым HTML5 тегом <video>. Соответственно, возникает вопрос обеспечения работы рекламной функциональности в новом окружении. Далее будет рассмотрен пример использования разработанного нами HTML5 video VAST plug-in’а для показа рекламы на базе «чистого» тега <video>.
В своих статьях мы неоднократно писали про использование рекламного сервера OpenX. В базовой установке при помощи OpenX Video Plugin сервер поддерживает отдачу видеорекламы в стандарте VAST, который описывает собственно параметры рекламного содержимого и методы реакции на действия пользователя. При этом задание конкретного времени, в которое будет показан оверлей либо врезка, обеспечивается видео плеером. Следуя этой идеологии, нам потребуется настроить OpenX сервер, подготовив необходимые видеоматериалы, а также создать html-страничку, на которой будет осуществляться просмотр. Со скринкастом по запуску рекламной кампании с помощью OpenX можно ознакомиться здесь, о странице просмотра речь пойдет ниже.
Итак, предположим, что у нас имеется HTML5 страница, содержащая видеоконтент, встроенный при помощи тега <video>:
<!DOCTYPE html> <html> <head> <title>HTML5 javascript OpenX plug-in example</title> </head> <body> <video id="example_video_1" src="content/bbb.mp4" width="640" height="480" controls /> </body> </html>
Мы хотим, чтобы во время просмотра воспроизведение прерывалось показом рекламных роликов. Добавим в тег <video> атрибут ‘ads’, который и будет содержать всю необходимую для этого информацию:
ads = ' { "servers": [ { "apiAddress": "http://example.com/openx/www/delivery/fc.php" } ], "schedule": [ { "zone": "11", "position": "pre-roll" }, { "zone": "11", "position": "mid-roll", "startTime": "00:00:08" }, { "zone": "11", "position": "mid-roll", "startTime": "00:06:00" }, { "zone": "11", "position": "post-roll" } ] }'
Смысл задаваемых параметров интуитивно понятен:
-
1apiAddress
- URL скрипта доставки рекламы Вашего сервера OpenX
-
1zone
- идентификатор зоны OpenX, из которой будет производиться выбор рекламных материалов
-
1position
- тип рекламного материала (pre-roll, mid-roll, post-roll)
-
1startTime
- время начала показа рекламного ролика во временной шкале основного видео (применительно к mid-roll’ам, формат – «hh:mm:ss»)
После подключения
1 | html5videovastplugin.js |
остается лишь добавить вызов функции
1 | initAdsFor("example_video_1") |
, где в качестве параметра выступает идентификатор нашего элемента <video>. После всех действий код страницы будет выглядеть так:
<!DOCTYPE html> <html> <head> <title>HTML5 javascript OpenX plug-in example</title> <script src="html5videovastplugin.js"></script> </head> <body> <video id="example_video_1" src="content/bbb.mp4" width = "640" height="480" controls ads = ' { "servers": [ { "apiAddress": "http://example.com/openx/www/delivery/fc.php" } ], "schedule": [ { "zone": "11", "position": "pre-roll" }, { "zone": "11", "position": "mid-roll", "startTime": "00:00:08" }, { "zone": "11", "position": "mid-roll", "startTime": "00:06:00" }, { "zone": "11", "position": "post-roll" } ] }' /> <script>initAdsFor("example_video_1");</script> </body> </html>
Следует также отметить, что в настоящий момент поддержка форматов браузерами выглядит следующим образом:
- H.264 (MP4), AAC - Safari 3.0+, Chrome 5.0+, iOS 3.0+, Android 2.0+, IE 9.0+
- Theora (OGG), Vorbis - FireFox 3.5+, Chrome 5.0+, Opera 10.5+
- VP8 (WebM),Vorbis - IE 9.0+, FireFox 4.0+, Chrome 6.0+, Opera 10.6+,
поэтому будьте внимательны при подготовке основного видеоконтента и видеорекламы.
Актуальную версию javascript-модуля можно скачать на странице проекта http://labs.denivip.ru/projects/html5videovastplugin.
Ждем Ваших комментариев.