HTML5 Video VAST plug-in

Posted on by

This post is also available in: Английский

Video Ads HTML5
В настоящее время практически все веб-сайты, специализирующиеся на показе видеоконтента, осуществляют вставку рекламного содержимого в свои видеоматериалы. Хотя говорить о грядущем массовом отказе от использования 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"
                 }
            ]
         }'

Смысл задаваемых параметров интуитивно понятен:

  • 1
    apiAddress

    — URL скрипта доставки рекламы Вашего сервера OpenX

  • 1
    zone

    — идентификатор зоны OpenX, из которой будет производиться выбор рекламных материалов

  • 1
    position

    — тип рекламного материала (pre-roll, mid-roll, post-roll)

  • 1
    startTime

    — время начала показа рекламного ролика во временной шкале основного видео (применительно к 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.

Ждем Ваших комментариев.