На главную

MelonPlayer с интегрированным проигрывателем рекламных креативов в формате VAST/DAAST

Данный плеер представляет собой расширение класса 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'a).

Чтобы создать рекламный плеер, надо использовать конструктор MelonPlayer.Ad вместо MelonPlayer.Core.

Пример:

var player = new MelonPlayer.Ad({
    source: 'http://hls-02-europaplus.emgsound.ru/11/128/playlist.m3u8',
    parent: document.getElementById('player'),
    ads: {
        // url для получения VAST/DAAST
        source: 'https://url-to-vast-xml-provider',
        // id элемента в котором будет выполняться открутка рекламного креатива
        parent: document.getElementById('ad'),
        
        // настройки ниже установлены по умолчанию, при необходимости их можно менять
        // таймаут запроса VAST/DAAST
        // timeout: 5000,

        // автозапуск рекламы при воспроизведении потока
        // autoPlay: false,
        
        // продолжать воспроизведение рекламы после клика на объявление
        // playAfterClick: true,

        // ограничения максимального размера баннера
        // maxBannerSize: { width: false, height: false }
    }
});

Конструктор MelonPlayer.Ad принимает точно такой же объект конфигурации как и MelonPlayer.Сore, с той лишь разницей, что необходимо дополнительно передать настройки для баннеров в поле ads. Полученный плеер полностью наследует функциональность MelonPlayer.Core, и добавляет к ней ряд методов и свойств для работы с рекламой.

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

• source - URL источника для запроса рекламы;
• parent - элемент страницы в котором будет выполняться открутка рекламы;

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

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

Для рекламного плеера доступны (помимо методов ядра) следующием методы:

• setAdSource(source: string, startAfterChange?: boolean = false) - установка url для запроса рекламы;
• checkAd(play?: boolean = true) - запуск процессинга текущего рекламного url, аргумент play указывает, играть ли поток после рекламы (по умолчанию поток играет); Вызов этого метода (без параметров checkAd() или checkAd(true)) выполняет запрос рекламы, если она есть ставит поток на паузу, играет рекламу, затем включает поток обратно. Чтобы воспроизведение потока не запускалось можно вызвать checkAd(false);
• skipAd(play?: boolean = true) - пропуск играющего рекламного креатива, аргумент play указывает, играть ли поток после пропуска. Вызов этого метода (без параметров skipAd() или skipAd(true)) останавливает рекламу, если она есть, и запускает воспроизведение потока. Чтобы воспроизведение не запускалось можно вызвать skipAd(false);
• setAutoPlay(play: boolean) - установка режима автоматического воспроизведения рекламы при вызове метода play;
• setPlayAfterClick(playAfterClick: boolean) - установка поведения плеера при клике на рекламу, если установить в true (установлено по умолчанию), то при клике на рекламу плеер будет продолжать играть рекламу до конца и затем включит поток, а если задать false, то при клике на рекламу воспроизведение будет приостановлено, и слушатель должен будет запустить его сам, когда вернётся на страницу с плеером;

Для рекламного плеера доступны (помимо свойств ядра) следующием свойства:

• AdPlayer - экземпляр плеера для открутки рекламы (при использовании MelonPlayer.Ad рекомендуется использовать этот объект только для считывания свойств и подписки на события, в остальных случаях могут возникать конфликты);
• isAdInProcess - флаг запущенного процессинга рекламы (true | false);
• isAdPaused - флаг паузы во время рекламы (true | false);