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

Данный плеер обособлен от основного плеера. При работе с ним следует руководствоваться только лишь информацией приведенной в этом разделе и в никаких других.

Текущие возможности плеера

Поддержка VAST 2.0, DAAST (Pre-roll Linear Ad (audio), Companion Ad (StaticResource, IFrameResource))
Поддержка событий Start, firstQuartile, midpoint , thirdQuartile, complete, pause, resume, mute, unmute, Impression, CompanionClickThrough
Управление стартом/остановкой проигрывания аудио в формате HLS, управление громкостью воспроизведения

Описание API

Для подключения плеера к веб-странице, надо добавить следующие скрипты:

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

В глобальное пространство имен экспортируется 1 объект - HlsPlayer. Который содержит два свойства:

HlsWebPlayer - конструктор плеера.
VastAds - плагин для обработки рекламных объявлений. Не используется самостоятельно, лишь передается в конструктор плеера (см. пример ниже).

Создание плеера осуществляется через конструктор следующим образом.

<body>
    <div id="player"></div>
    <div id="banners"></div>

    <script>        
        hssplayer = new HlsPlayer.HlsWebPlayer({
            "player": { // вся конфигурация завернута в еще один объект
                parentId: "#player", // селектор (обычно состоящий из id) указывающий на элемент в который будет встроен плеер
                width: 1, // legacy parameter. использовать как в данном примере
                height: 1,  // legacy parameter. использовать как в данном примере
                chromeless: true,  // legacy parameter. использовать как в данном примере
                audioOnly: true,  // legacy parameter. использовать как в данном примере
                autoPlay: false,  // legacy parameter. надо ли начинать воспроизведение сразу. Лучше ставить flase, потому что обычно браузеры блокируют авто-воспроизведение
                persistConfig: false, // legacy parameter. использовать как в данном примере
                hlsjsConfig: { // legacy parameter. использовать как в данном примере
                    levelLoadingTimeOut: 3000,
                    xhrSetup: function(xhr, url) {
                        xhr.withCredentials = true;
                    },
                },
                playbackConfig: { // legacy parameter. использовать как в данном примере
                    crossorigin: 'use-credentials'
                },
                plugins: { "core": [HlsPlayer.VastAds] }, // Объект с плагинами. Используйте также как и в данном примере
                VastAdsConfig: { // Конфигурация рекламы
                    daast: true, // использовать ли DAAST формат (необязательный, по умолчанию VAST)
                    bannersId: "banners", // id блока в котором будет отображаться рекламный баннер
                    timeout: 5000, // таймаут загрузки баннера (необязательный, по умолчанию 3000)
                }
            }
        });
        hssplayer.load('ссылка на аудио поток', 'ссылка на объявление (необязательно)');
        hssplayer.play();
    </script>
</body>

Как можно видеть, объект конфигурации содержит много наследственных параметров, который не были скрыты в связи с сохранением обратной совместимости. Интерес представляют лишь следующие параметры.

parentId - значение атрибута id пустого элемента DOM веб-страницы, куда будет вставляться плеер, непосредственно работающий с аудиопотоком в браузере. Обычно данный блок скрывается через CSS, например, так:

#player {
    width: 0;
    height: 0;
    left: -999em;
    top: -999em;
    position: absolute;
    opacity: 0;
    overflow: hidden;
    z-index: -1000;
}

Если в плеере необходимо включить поддержку VAST/DAAST, то надо добавить плагин plugins: { "core": [HlsPlayer.VastAds] } в объект конфигурации и использовать следующие дополнительные параметры в VastAdsConfig:

daast - использовать DAAST (необязательный, по умолчанию false).
bannersId - значение атрибута id элемента DOM веб-страницы, куда будут вставляться баннеры, полученные по VAST-запросу (необязательный).
timeout - таймаут загрузки URL VAST, в мс (необязательный, по умолчанию 3000).
position - положение элемента с баннерами внутри элемента с id=bannersId , первый или последний (необязательный, по умолчанию 'first').
countdownId - значение атрибута id элемента DOM веб-страницы, куда будет вставляться элемент DIV c отсчетом времени до конца рекламного ролика (необязательный, по умолчанию значение bannersId).

Объект плеера имеет следующие методы:

setVolume(value) - Установка громкости плеера. value - значение громкости от 0 до 100.
getVolume() - Получить текущее значение громкости плеера.
mute() - Отключение звука.
unmute() - Включение звука.
play() - Запустить проигрывание плеера. Если метод был вызван во время проигрывания рекламного аудиоролика, то последующий вызов play() начнет проигрывание с момента остановки этого ролика. В других случаях последующий вызов play() продолжит проигрывание аудио в реальном времени.
stop() - Остановить проигрывание плеера.
load(source, [vast_url]) - Загрузить новый источник аудио HLS в плеер.
source : источник HLS, URL на плейлист m3u8 или {source: HLS_URL, mimeType: 'application/x-mpegURL'}, если HLS URL не заканчивается на .m3u8.
vast_url : URL источника VAST/DAAST (необязательный)
Пример: hssplayer.load({ source: '//hlstest.com/playlist.m3u8', mimeType: 'application/x-mpegURL' });

Пример

Здесь можно скачать пример использования плеера

После скачивания распакуйте архив и запустите статический сервер в корневой папке. Потом откройте ad_player.html в браузере, чтобы просмотреть пример в работе.