Плеер. API-документация для плеера

Последние изменения: 08.02.2024

Инициализация плеера через iframe
Доступные события (Events)
Вызов методов плеера
Завершение работы

API позволяет управлять настройками плеера путём использования JavaScript, а также собирать данные о его использовании для дальнейшего анализа. 

Инициализация плеера через iframe

Скопируйте iframe из настроек видео/Live потока в личном кабинете:

  • Для видео: раздел Все видео → Настройки → Экспорт → Код

  • Для Live потока: раздел Live стриминг → Настройки → Ссылки для экспорта → Код

Добавьте параметр id='eplayer' в iframe и вставьте его в код сайта.

Пример iframe кода из личного кабинета с добавлением id='eplayer':

<iframe width="640" height="360" src="https://vp-stream.edgevideo.ru/videos/dSmuIp-tNRtwACT" allow="autoplay; clipboard-write" allowfullscreen frameborder="0" id='eplayer'></iframe>

Где:

  • widht — ширина плеера

  • height — высота плеера

  • src — URL загрузки контента (ссылка на видео или Live поток)

  • allowfullscreen — если параметр добавлен в iframe, к элементам управления плеером добавляется кнопка перехода в полноэкранный режим

  • frameborder — видимая граница плеера. По умолчанию значение «0»

  • id — идентификатор плеера. Необходим для дальнейшей инициализации плеера при вызове методов API

После iframe добавьте следующий код для инициализации плеера:

<script type="text/javascript" charset="utf-8" src="https://vplatform.edgevideo.ru/_players/latest/eplayerAPI.js"></script>
<script>
  window.onload = function() {
    let eplayerAPI = new EdgePlayer.eplayerAPI(document.getElementById('eplayer')); 
  }
</script>

Событие window.onload срабатывает, когда загружается вся страница, включая iframe. Далее идёт указание на плеер, к которому будут применяться функции API.

Пример полного кода инициализации плеера и iframe для HTML страницы:

<!DOCTYPE html>
<html>
<head>
 <title>TITLE</title>
</head>
<body>
 <iframe width="640" height="360" src="https://demopage.edgevideo.ru/videos/79470_YJHUNNocCsrjiCDx" allowfullscreen frameborder="0" id='eplayer'></iframe>
<script type="text/javascript" charset="utf-8" src="https://vplatform.edgevideo.ru/_players/latest/eplayerAPI.js"></script>
<script>
  window.onload = function() {
    let eplayerAPI = new EdgePlayer.eplayerAPI(document.getElementById('eplayer')); 
  }
</script>
 </script>
 </script>
</body>
</html>

Доступные события (Events)

Событие

Возвращает

Описание

ready

  

Плеер готов к воспроизведению

play

  

Воспроизведение запущено 

pause

  

Воспроизведение остановлено

seek

Текущее время в секундах

Видео воспроизводится

resize

Объект с текущими размерами

Размер плеера был изменён

fullscreen

true/false

Плеер был переведён в полноэкранный режим

timeupdate

Объект отсчёта времени

Время в плеере было изменено 

volumeupdate

Текущий уровень громкости

Громкость звука плеера была изменена

error

Ошибку

Плеер получил ошибку

ended

  

Воспроизведение видео завершено

stop

  

Работа плеера завершена

progress

Состояние буфера

  

levels 

Все имеющиеся качества

  

tracks

Событие получения списка всех аудиодорожек

  
advertisementWasStarted

Начало загрузки рекламного ролика

  

advertisementIsPlaying

Начало воспроизведения рекламного ролика

advertisementWasFinished

Окончание загрузки или воспроизведения рекламного ролика (если он воспроизводился)

  

 

Вызов методов плеера

Вызывать методы можно после события ready:

eplayerAPI.on('ready', () => {
console.log('[Event]', 'ready')
eplayerAPI.method({name: 'play'})
})

Доступные методы:

Имя метода

Тип данных 

Описание

getCurrentTime

Число

Текущее время в секундах

getDuration

Число

Длина видео в секундах 

getVolume

Число    

Громкость. Значение от 0 (звук выключен, mute) до 100 (максимальная громкость)

isDvrEnabled

Логическое выражение

Показывает статус услуги DVR:

  • true — DVR включён

  • false — DVR выключен

isPlaying

Логическое выражение

Показывает текущий статус воспроизведения:

  • true — идёт воспроизведение

  • false — воспроизведение выключено/остановлено/не запущено

mute

  

Выключает звук при воспроизведении

unmute

  

Включает звук при воспроизведении

pause

  

Останавливает воспроизведение 

play

  

Запускает воспроизведение

resize

Объект

Изменяет границы плеера 

seek

Число

Перемотка воспроизведения (секунды).

Например, player.seek(120) перематывает видео и начинает показ с 2 минуты

seekPercentage

Число

Перемотка воспроизведения (проценты).

Например, player.seek(50) перематывает видео и начинает показ с середины видео

setVolume

Число

Устанавливает громкость для воспроизведения текущего видео

stop

  

Останавливает воспроизведение текущего видео

multicamera,getCamerasList

  

Получить список камер

multicamera,changeById,id_camera

  

Устанавливает камеру по ID

multicamera,

getCurrentCamera

  

Получить активную камеру

level_selector,

setLevel

  

Задаёт качество видео

toggleFullscreen

  

Включить/выключить fullscreen

Шаблон вызова метода:

eplayerAPI.method({name: 'isPlaying', params: {}, callback: (res) => {
 console.log(res)
}})

Где: 

  • name — имя функции

  • params — параметры функции

  • callback — функция обратного вызова

Примеры:

<script>
 window.onload = function() {
 let eplayerAPI = new EdgePlayer.eplayerAPI(document.getElementById('eplayer')); 
 let flag = true;
 eplayerAPI.on('ready', () => {
 console.log('[Event]', 'ready')
 eplayerAPI.method({name: 'play'})
 })

eplayerAPI.on('play', () => {
 if(flag) {
 eplayerAPI.method({name: 'pause'})
 flag = false;
 }
 console.log('[Event]', 'play')
 })

 eplayerAPI.method({name: 'getPlugin', params: {
pluginName: 'level_selector', 
pluginMethod: 'setLevel',
pluginValue: "360"
}, callback: (e) => {
console.log(e) 
}})

eplayerAPI.method({name: ‘getPlugin’, params: {
    pluginName: “audio_selector”, #устанавливает определенный аудио-трек
    pluginMethod: “setIndexTrack”,
    pluginValue: “ru”
}, callback: (e) => {
    // alert(`getPlugin  ${e}`)
    console.log(e)
}})

eplayerAPI.on('pause', () => {
 console.log('[Event]', 'pause')
 })

eplayerAPI.on('volumeupdate', () => {
 console.log('[Event]', 'volumeupdate')
 })

eplayerAPI.on('timeupdate', () => {
 console.log('[Event]', 'timeupdate')
 })

eplayerAPI.on('stop', () => {
 console.log('[Event]', 'stop')
 })

eplayerAPI.on('seek', () => {
 console.log('[Event]', 'seek')
 })

eplayerAPI.on('resize', () => {
 console.log('[Event]', 'resize')
 })

eplayerAPI.on('fullscreen', () => {
 console.log('[Event]', 'fullscreen')
 })

eplayerAPI.on('error', () => {
 console.log('[Event]', 'error')
 })

eplayerAPI.on('ended', () => {
 console.log('[Event]', 'ended')

 })
 }
 </script>

Завершение работы с плеером

Чтобы завершить работу с плеером, вызовите метод:

eplayerAPI.destroy()

Помогла ли вам статья?