MelonPlayer с поддержкой рекламы в формате DAAST

Данный плеер является прямым расширением ядра MelonPlayer'a и все, что справедливо для ядра, справедливо и для плеера с поддержкой рекламы (то есть имеются те же самые методы и свойства).

Основные возможности плеера, которых нет в ядре:

1. Проигрывание прероллов (баннеров перед началом воспроизведения).
2. Проигрывание мидроллов (баннеров, которые отображаются в тот момент, когда в эфире начинается реклама).

Для функционирования мидроллов необходим hls-поток с метаданными внутри для точной синхронизации звука в эфире и времени отображения баннера. Все баннеры загружаются по ссылкам, в формате DAAST. Баннеры не отображаются в Internet Explorer и старых браузерах.

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

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

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

API

Так как рекламный плеер наследует всю функциональность ядра, то далее будут описаны только отличия в конфигурации и доп. методы для загрузки прероллов. Все остальные методы смотри в описании ядра MelonPlayer'a.

В глобальное пространство имен добавляется 1 объект MelonPlayer. Чтобы создать рекламный плеер, надо использовать конструктор MelonPlayer.AdPlayer, а не ядро напрямую.

Пример:

const player = new MelonPlayer.AdPlayer({
    source: "//hls-01-radio7.emgsound.ru/13/playlist.m3u8", 
    parent: document.querySelector("#hidden_element"), 
    metadata: {
        // необходимая настройка для мидроллов, чтобы плеер читал метаданные из потока
        isInAudioStream: true, 
    },
    // Объект конфигурации баннеров
    adsConfig: {
        // Элемент внутри которого будут отображаться баннеры
        bannerContainer: document.querySelector('#banner'),
        // Ограничение на время загрузки преролла в миллисекундах.
        // По умолчанию 3000. Необязательный параметр.
        requestTimeout: 3000,
        // Функция для формирования ссылки на мидролл по dbId элемента метаданных.
        // Используется плеером в процессе анализа метаданных из потока hls 
        // для загрузки баннеров. Параметр необходим, если нужны мидроллы.
        getAdUrlByDbId: (dbId) => 'https://a.adwolf.ru/2909/getCode?pp=u&ps=cle&p2=jg&pr=fcixwyi&rs=dbid' + dbId,
    }
});

Конструктор MelonPlayer.AdPlayer принимает точно такой же объект конфигурации как и MelonPlayer.Сore, с той лишь разницей, что можно передавать еще и настройки для баннеров в поле adsConfig, которое содержит объект со следующими свойствами:

• bannerContainer - HTMLElement внутри которого будет отображаться баннер. Обязательный параметр, если передаются настройки для рекламы.
• requestTimeout - ограничение времени загрузки баннера в миллисекундах. По умолчанию 3000. Необязательный параметр. Используется только для прероллов - если преролл не удается загрузить за указанное время, то загрузка будет отменена и начнется воспроизведение эфира.
• getAdUrlByDbId - фукнция для формирования ссылки на мидролл по dbId элемента. Используется плеером при анализе метаданных в потоке hls для загрузки баннеров. Стоит отметить, что для включения анализа метаданных потока надо чтобы был проставлен флаг metadata.isInAudioStream в объекте конфигурации.

Также рекламный плеер имеет дополнительный метод:

• loadPreRoll(url) - метод для загрузки преролла по url. После вызова этого метода, плеер активирует режим перолла, что значит, что после вызова метода play() сначала будет проигран баннер, а уже потом начнется воспроизведение эфира. Преролл проигрывается 1 раз, после чего уничтожается, поэтому для надо вызывать метод перед каждым вызовом play(), если нужно показывать баннер всякий раз при старте. Вызов метода повторно до окончания предыдующего преролла будет просто проигнорирован. Если на момент вызова play() баннер еще не загрузился, то плеер будет ждать окончания загрузки, но не дольше чем указано в параметре adsConfig.requestTimeout. Метод возвращает true, если преролл был добавлен, и false, если вызов был прогнорирован.

События

Плеер возбуждает те же события, что и ядро, для основного радио-потока. А когда играет реклама (прероллы), то только события:

• MelonPlayer.Events.PLAYING
• MelonPlayer.Events.WAITING

Сводный пример

Далее представлен типовой пример работы с плеером.

const player = new MelonPlayer.AdPlayer({
    parent: document.createElement('div'),
    source: "http://dev01.hostingradio.ru/retro/playlist.m3u8",
    metadata: {
        isInAudioStream: true,
    },
    adsConfig: {
        bannerContainer: document.querySelector("#vast-banners"),
        getAdUrlByDbId: dbId => '/examples/byDbId/' + dbId,
    },
});

// устанавливаем обработчики событий 
player.on(MelonPlayer.Events.METADATA_UPDATED, ({metadata, delay}) => {
    // работа с метаданными из потока
});

// Загружаем преролл
player.loadPreRoll('/examples/preroll_video.xml');

// Сначала будет проигран преролл, а потом начнется воспроизведение эфира.
// Мидроллы будут отображаться автоматически в процессе воспроизведения.
player.play();