Banner Video

Описание

Шаблон работает только на кодах вставок, использующих библиотеку loader.js - в инструкции такие коды имеют пометку NEW.

Banner Video - видео баннер, для размещения которого требуется подготовить видео-файл или ссылку на Wrapper XML.
Данный видео формат является кросс-платформенным – показывается на декстопах, планшетах и мобильных телефонах.
Воспроизведение осуществляется HTML5 видео плеером. Формат полностью совместим со спецификациями видеорекламы VAST и VPAID, имеет поддержку стандартных событий (tracking events), которые запрашиваются в момент их наступления в плеере.

С помощью шаблона "Banner Video [loader]" можно добавить баннер на сайт двумя способами:
1. подготовить видео-файл.
2. подготовить VAST совместимую ссылку на Wrapper XML.

Возможности баннера, доступные при добавлении в ADFOX:
- встроенные элементы управления воспроизведением: кнопки плей, пауза, включения/выключения звука и "Закрыть" с возможностью замены их на собственные. Кнопки "пауза" и "плей" на баннере показываются поочередно.
- возможность добавить картинку-постер для баннера, которая показывается до загрузки видео-файла и фоновое изображение, которое показывается под видео (если видео меньше по размеру, чем баннер) и после закрытия баннера.
- фоновое изображение баннера всегда масштабируется так, чтобы быть полностью занять доступное пространство баннера. При несовпадении размера ее лишние края будут обрезаться.
- настройка события начала воспроизведения видео: по клику, автоматически, при попадании баннера в зону видимости, при наведении мыши.
- настройка включения звука в начале воспроизведения и видимости кнопок управления звуком.
- при отведении мыши от баннера звук постепенно выключается, а при наведении мыши - плавно включается.
- показ кнопки "Закрыть" настраивается: показ сразу, отложенный показ, скрыть кнопку.
- при клике на кнопку "Закрыть" баннер будет скрыт, а его место займет фоновое изображение аналогичного размера, которое останется кликабельным. Если фоновое изображение не задано, баннер будет удален со страницы.
- вся область баннера кликабельна, независимо от того, как расположено видео внутри баннера. Ссылка всегда будет открываться в новом окне или вкладке.

Требования

Требования к изображениям и кнопкам управления
Фоновое изображение и изображение-постер изготавливаются при необходимости.
Если размеры видео не равны размеру баннера, то при подготовке изображения-постер рекомендуем соблюдать пропорции соотношения сторон у видео и постера.

При необходимости установить в баннер собственные кнопки управления воспроизведением видео - подготовьте изображения кнопок.
Кнопки будут вставлены в баннер

Допустимые форматы изображений: png, gif, jpg.
Максимальный вес одного файла: 300Кб.

Требования к видео ролику
Допустимые форматы видео: форматы, которые поддерживают браузеры. Рекомендуемый формат mp4.
Максимальный вес видео ролика, который будет загружен в интерфейс ADFOX: до 1Мб.

Подсчет событий

В баннере ведется подсчет событий:

Начало просмотра (start)
Ролик выбран (creativeView)
Ролик загружен (impression)
Первая четверть просмотра (firstQuartile)
Середина просмотра (midpoint)
Третья четверть просмотра (thirdQuartile)
Полный просмотр (complete)
Выключить звук (mute)
Включить звук (unmute)
Пауза (pause)
Повторное проигрывание (rewind)
Возобновление после паузы (resume)
Клик по кнопке «закрыть» (close)
Ошибка проигрывания или инициализации баннера (error)

Добавление баннера в ADFOX

Чтобы добавить баннер в ADFOX выберите нужный тип баннера и шаблон "Banner Video [loader]".

Укажите параметры баннера:

  1. Ссылка на промерочный пиксель — по умолчанию используется пиксель ADFOX //banners.adfox.ru/transparent.gif, при необходимости вести учет показов в сторонней системе, удалите пиксель ADFOX и укажите другую ссылку.

  2. URL перехода — укажите ссылку на сайт рекламодателя. Для корректной работы перехода обязательно проверьте наличие протокола в ссылке (http:// или https://).

  3. Ширина баннера (% или px) — укажите ширину баннера в пикселях или в процентах.

  4. Высота баннера (px) — укажите высоту баннера в пикселях.

  5. Изображение для фона (URL) — картинка для фона баннера, видна в момент, когда видео уже подгружено для показа. Если размер видео меньше размера баннера, то свободное место займет фоновое изображение. Также фоновое изображение показывается после закрытия видео.

  6. Изображение для постера (URL) — картинка в качестве постера для видео, которая показывается до загрузки видео в баннер. Как только видео будет подгружено, постер сменится на фоновое изображение.

  7. Видна ли кнопка звука (yes/no) — укажите видимость кнопок включения/выключения звука:
    yes - кнопки показываются;
    no - кнопки скрыты.

  8. Звук в начале выключен (yes/no) — укажите, выключен ли звук на старте:
    yes - звук выключен;
    no - звук включен.

  9. Инициатор (click, auto, scroll, hover) — событие, при котором запускается проигрывание видео. Одновременно возможен только один вариант.
    Доступные варианты начала воспроизведения:
    click - по клику пользователем на кнопку "►" на баннере;
    auto - сразу после загрузки баннера без активных действий пользователя;
    scroll - при попадании баннера в зону видимости пользователя при скролле страницы;
    hover - при наведении мыши на баннер (на мобильных устройствах работает по клику на кнопку плей).

  10. Время до появления кнопки "Закрыть" (сек.) — время в секундах до появления кнопки закрытия баннера. Время отсчитывается от начала проигрывания видео, считается только время проигрывания. Если указано:
    0 - кнопка будет показана сразу;
    -1 - кнопка не будет показана, даже если указан параметр "Кнопка закрытия".

  11. Формат видео рекламы — укажите формат рекламы:
    %global.linearAdVAST2% - если размещение баннера происходит с помощью видео-файла.
    %global.WrapperAdVAST2% - если размещение баннера происходит с помощью ссылки на VAST XML.

  12. Видео (URL) — если размещение баннера происходит с помощью видео-файла, то загрузите видео или укажите ссылку на видео. При указании данного параметра, не нужно указывать cсылку на VAST XML.
    В параметре "Формат видео рекламы" обязательно укажите тип рекламы: %global.linearAdVAST2%

  13. Ссылка на VAST XML — cсылка на VAST 2.0 XML контейнер c данными о видео. При указании данного параметра, не нужно указывать видео-файл.
    В параметре "Формат видео рекламы" обязательно укажите тип рекламы: %global.WrapperAdVAST2%

  14. Расположение видео в баннере — расположение видео внутри баннера:
    bottom - блок с видео прикреплен к нижнему краю баннера. Видео будет занимать всю доступную ширину баннера.
    center - блок с видео будет расположен по центру. Рекомендуемое значение. При этом виде расположения указывать ширину и высоту видео необязательно.
    left - блок с видео прикреплен к левому краю баннера. Видео будет занимать всю доступную высоту баннера.
    right - блок с видео прикреплен к правому краю баннера. Видео будет занимать всю доступную высоту баннера.
    top - блок с видео прикреплен к верхнему краю баннера. Видео будет занимать всю доступную ширину баннера.

  15. Продолжительность видео (в формате "HH:MM:SS") — продолжительность видео в формате "HH:MM:SS" (часы:минуты:секунды).

  16. MIME-type видео (например, video/mp4) — MIME-тип видео-файла, например "video/mp4".

  17. Ширина видео — ширина видео в пикселях без указания размерности. Значение обязательно, если баннер размещен с помощью видео-файла.

  18. Высота видео — высота видео в пикселях без указания размерности. Значение обязательно, баннер размещен с помощью видео-файла.

  19. Кнопка закрытия ("link":"","coor":[0, 0]) — конфигурация кнопки, закрывающей видео баннер.
    Формат записи:
    "link":"//content.adfox.ru/transparent.gif","coor":[0, 0]
    Где "link" - ссылка на картинку,
    "coor" (left, top) - координаты левой верхней точки картинки.
    Изображения вставляются как есть, без масштабирования. Размер кнопок будет равен размеру изображений.
    Пример кнопки по умолчанию:

  20. Кнопка вкл звука ("link":"","coor":[0, 0]) — конфигурация кнопок включения/выключения звука.
    Формат записи:
    "link1":"//content.adfox.ru/transparent.gif","link2":"//content.adfox.ru/transparent.gif","coor":[0, 0]
    Где "link1" - ссылка на картинку выключения звука (обычно перечеркнутый динамик),
    "link2" - ссылка на картинку включения звука (обычно нарисованный динамик),
    "coor" (left, top) - координаты левой верхней точки картинок.
    Одновременно кнопки не появляются.
    Изображения вставляются как есть, без масштабирования. Размер кнопок будет равен размеру изображений.
    Пример кнопки по умолчанию:

  21. Кнопка паузы ("link":"","coor":[0, 0]) — конфигурация кнопки паузы видео.
    Формат записи:
    "link":"//content.adfox.ru/transparent.gif","coor":[0, 0]
    Где "link" - ссылка на картинку,
    "coor" (left, top) - координаты левой верхней точки картинки.
    Изображения вставляются как есть, без масштабирования. Размер кнопок будет равен размеру изображений.
    Пример кнопки по умолчанию:

  22. Кнопка плей ("link":"","coor":[0, 0]) — конфигурация кнопки запуска видео.
    Формат записи:
    "link":"//content.adfox.ru/transparent.gif","coor":[0, 0]
    Где "link" - ссылка на картинку,
    "coor" (left, top) - координаты левой верхней точки картинки.
    Изображения вставляются как есть, без масштабирования. Размер кнопок будет равен размеру изображений.
    Пример кнопки по умолчанию: