Проигрыватель рекламных креативов в формате VAST/DAAST

Проигрыватель предназначен для запроса и воспроизведения VAST/DAAST рекламы, и при необходимости может управляться независимо от MelonPlayer.Ad. Он умеет только проверять наличие рекламы в xml по ссылке и играть её в заданном элементе с отправкой событий трекинга. При этом в проигрывателе используется ядро MelonPlayer'a в качестве плеера для рекламных аудио/видео роликов.

Класс MelonPlayer.Ad представляет собой расширение класса MelonPlayer.Core, дополненное данным проигрывателем, и управляющее воспроизведением рекламы в определённые моменты воспроизведения потока.

Общий алгоритм работы плеера: запрашивается реклама по ссылке, после чего, если реклама в ответе есть, она откручивается с отправкой всех необходимых трекинговых пикселей.

Плеер поддерживает паузу/возврат во время воспроизведения рекламы, а также пропуск.

Демо

Тестовый пример мультиплеера

Как подключить

Чтобы использовать плеер на своей странице, необходимо добавить 2 скрипта (скрипты указанные в документации ядра MelonPlayer'a подключать не надо):

<script src="//js.hostingradio.ru/melon/clappr/clappr.min.js"></script>
<script src="//js.hostingradio.ru/melon/melon-player-ad.js"></script>

API

Чтобы создать отдельный рекламный плеер, нужно использовать конструктор MelonPlayer.AdPlayer(parent, options).

Пример:

var adPlayer = new MelonPlayer.AdPlayer(document.getElementById('ad'), {
    // по умолчанию
    // timeout: 5000,
    // playAfterClick: true,
    // maxBannerSize: { width: false, height: false }
});

Объект options при создании плеера может включать следующие поля:

timeout - таймаут запроса рекламы в ms (number), по умолчанию 5000ms, значение 0 означает отсутствие таймаута;
playAfterClick - продолжать ли играть рекламу после клика на объявление (true | false), по умолчанию true;
maxBannerSize - ограничения максимального размера баннера, задаются в виде объекта { width: number | false, height: number | false, }, любое из полей может быть пропущено, значение 0 | false будет означать отсутствие ограничения;

Дальнейшая работа с плеером заключается в вызове метода process(source), и возможности останавливать/возобновлять/пропускать рекламу во время её воспроизведения;

Пример:

// обработка рекламы (воспроизведение, если реклама есть в полученном VAST/DAAST) и последующее включение потока
async function playAd(source) {
    await adPlayer.process(source);
    mainPlayer.play();
}
// либо через чейнинг
function playAd(source) {
    adPlayer.process(source).then(mainPlayer.play());
}

// приостановка / возобновление рекламы
adPlayer.pauseAd();
adPlayer.resumeAd();

// пропуск рекламы
// метод асинхронный, и если после пропуска сразу нужно обработать другую рекламу, то обязательно нужно дождаться завершения его работы
adPlayer.skipAd().then(...);

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

Пример:

// установка уровня громкости
adPlayer.setVolume(50);     // 0-100
// отключение звука
adPlayer.mute();
// включение отключенного звука
adPlayer.unmute();

Также возможно менять поведение плеера при клике на рекламу:

Пример:

// приостанавливать воспроизведение при нажатии на рекламу
adPlayer.setPlayAfterClick(false);

В процессе работы доступны следующие свойства плеера:

sourceUrl - текущий url для запроса VAST/DAAST (string);
inProcess - флаг запущенного процессинга рекламы (true | false);
paused - флаг паузы (true | false);
muted - флаг отключения звука (true | false);
volume - текущий уровень громкости (number, 0 - 100);

Также плеер в процессе работы генерирует ряд событий. События перечисляются в объекте MelonPlayer.AdPlayerEvents.

PROCESS_STARTED - старт обработки рекламного url (обработка включает в себя запрос, проверку и воспроизведение рекламы);
AD_STARTED - старт воспроизведения рекламы;
AD_PAUSED - реклама поставлена на паузу;
AD_RESUMED - реклама возобновлена;
AD_FINISHED - воспроизведение рекламы завершено;
AD_SKIPPED - реклама пропущена;
PROCESS_FINISHED - обработка рекламного url завершена;