HTML5 Video VAST plug-in
Февраль 10th, 2012. В рубрике Разработка, Реклама. Нет комментариев.
This post is also available in: Английский
В настоящее время практически все веб-сайты, специализирующиеся на показе видеоконтента, осуществляют вставку рекламного содержимого в свои видеоматериалы. Хотя говорить о грядущем массовом отказе от использования 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.
Ждем Ваших комментариев.
English 
Русский