Screenglide HTML5 с видео

Описание

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

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

С помощью шаблона "Screenglide HTML5 с видео" можно добавить баннер на сайт несколькими способами:
1. HTML креатив или изображения и видео-файл.
2. HTML креатив или изображения и VAST-совместимая ссылка на Wrapper XML.

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

Требования к HTML коду (для разработчиков кода)

Воспользуйтесь готовой инструкцией для редакторов:
Adobe Animate CC;
Google Web Designer.

Подготовьте ваш проект, соблюдая следующие требования:

1. Максимально допустимое количество символов в HTML коде — 65 000;
2. JavaScript и CSS предпочтительнее размещать внутри HTML кода баннера;
Если итоговый HTML код превышает максимально допустимое количество символов, то необходимо уменьшить код за счет вынесения JavaScript и CSS в отдельные файлы:
- сохраните js и css код в отдельные файлы с расширением .js или .css;
3. В проекте может находиться только один файл с расширением .html;
4. Максимально допустимое количество файлов в проекте — 50;
5. Разрешенные типы файлов в проекте: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
6. Максимальный размер каждого файла (действует также для файлов внутри архива):
- 300Кб;
- 1Мб для видео файлов.
7. Названия файлов должны содержать только цифры или буквы английского алфавита, символ подчёркивания. Не допускается использование в названии файла русских букв, пробелов, кавычек и специальных символов;
8. В названиях переменных и объектов нельзя использовать русские буквы.
Исключение составляет только текст на баннере.
9. Формат готового проекта — zip архив.

Советы по подготовке креативов:

В HTML-фрейме доступен метод window.bannerDestroy(), который полностью уничтожает баннер.

Функции и переменные для схлопа и расхлопа

Функции доступны в глобальной области видимости. Рекомендуется использовать приставку window. перед вызовом каждой из них.

Вариант Описание
expandBanner При вызове этой функции произойдет расхлоп фрейма и показ видеоконтейнера
collapseBanner При вызове этой функции произойдет схлоп фрейма, постановка видео на паузу
onBannerCollapse Если существует в глобальной области видимости, то вызывается кодом adfox, чтобы известить код баннера о произошедшем схлопе
onBannerExpand Если существует в глобальной области видимости, то вызывается кодом adfox, чтобы известить код баннера о произошедшем расхлопе

Если коду баннера необходимо знать об изменении состояния расхлопа, которые произошли вне фрейма, то нужно реализовать функции onBannerCollapse и onBannerExpand.

Чтобы в любой момент посмотреть в каком состоянии сейчас находится баннер - схлопнутом или расхлопнутом, можно обратиться к глобальной переменной isBannerExpanded, которая вернет состояние расхлопа:
true — баннер в состоянии расхлопа;
false или не объявлена — баннер в состоянии схлопа.

При изменении размера канваса, его содержимое очищается в webkit браузерах, поэтому, если код креатива был создан самостоятельно без помощи таких редакторов как Adobe Animate, перерисовывайте канвас после изменения его размера.

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

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

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

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

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

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

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

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

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

  1. Архив с HTML5 креативом - загрузите .zip архив с проектом.

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

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

  4. HTML5 (css, html, js) — содержимое .html кода из архива с проектом (загружается автоматически из архива). Если HTML5 код не задан, то загрузите изображения-заглушки для баннера.

  5. Изображение №1 до расхлопа — если баннер состоит из двух изображений, то загрузите изображение наименьшего размера (до расхлопа).

  6. Изображение №2 после расхлопа — если баннер состоит из двух изображений, то загрузите изображение большего размера (после расхлопа). Изображение №2 будет фоном для видео, а в случае отсутствия изображения - фон баннера будет черного цвета.

  7. Расхлоп при инициализации (yes|no) — расхлопывать баннер при инициализации:
    yes - расхлопывать автоматически;
    no - не расхлопывать.

  8. Направление расхлопа (top|bottom|left и прочие) — укажите направление для расхлопа баннера:
    top - вниз;
    bottom - вверх;
    left - вправа;
    right - влево;
    central_point - из центральной точки открывать по центру;
    lower_right_corner - из нижнего правого угла открывать влево – вверх;
    lower_left_corner - из нижнего левого угла открывать вправо – вверх;
    overhead_right_corner - из верхнего правого угля открывать влево – вниз;
    overhead_left_corner - из левого верхнего угла открывать вправо – вниз.

  9. Сдвигать контент при расхлопе (yes|no) — укажите, будет ли баннер сдвигать контент:
    yes - сдвигать контент;
    no - баннер будет накрывать контент. Контент сдвигается как по горизонтали, так и по вертикали. Чтобы сдвигать по горизонтали, необходимо, чтобы контейнер был обтекаемым элементом (Например, display: inline-block или float: left).

  10. Сдвиг расхлопа по горизонтали (px или %) — сдвиг по горизонтали для видео баннера. Положительные значения сдвигают вправо, отрицательные - влево.

  11. Сдвиг расхлопа по вертикали (px или %) — сдвиг по вертикали для видео баннера. Положительные значения сдвигают вниз, отрицательные - вверх.

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

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

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

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

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

  17. MIME-type видео (например, video/mp4) — MIME-тип видео-файла, например "video/mp4". Значение обязательно, если баннер размещен с помощью видео-файла.

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

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

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

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

  22. Ширина после расхлопа (в px или 100%) — ширина баннера в расхлопнутом виде.

  23. Высота после расхлопа (в px) — высота баннера в расхлопнутом виде.

  24. Показывать кнопку "Закрыть" на видео (yes|no) — кнопка "Закрыть" схлопывает баннер:
    yes - показать кнопку;
    no - скрыть кнопку.

  25. Схлопывать по окончанию видео (yes|no) — схлопывать ли баннер по окончанию воспроизведения видео:
    yes - схлопывать;
    no - оставить баннер в расхлопнутом виде.

  26. Стили для блока баннера — произвольные стили для контейнера баннера одной строкой. Например, "border: 1px solid red;". Невалидные значения будут отброшены браузером.