Стриминг
Плеер. API-документация для плеера
API позволяет управлять настройками плеера путём использования JavaScript, а также собирать данные о его использовании для дальнейшего анализа.
Инициализация плеера через iframe
Скопируйте iframe из настроек видео/потока в личном кабинете:
-
Для видео: раздел Все видео → Настройки → Экспорт → Код
-
Для потока: раздел Прямые трансляции → Настройки → Ссылки для экспорта → Код
Добавьте параметр 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 |
Список всех аудиодорожек |
|
|
Начало загрузки рекламного ролика |
||
|
advertisementIsPlaying |
Начало воспроизведения рекламного ролика |
|
|
advertisementWasFinished |
Окончание загрузки или воспроизведения рекламного ролика (если он воспроизводился) |
Вызов методов плеера
Вызывать методы можно после события ready:
Доступные методы:
|
Название метода |
Тип данных |
Описание |
|
getCurrentTime |
Число |
Текущее время в секундах |
|
getDuration |
Число |
Длина видео в секундах |
|
getVolume |
Число |
Громкость. Значение от 0 (звук выключен, mute) до 100 (максимальная громкость) |
|
isDvrEnabled |
Логический тип |
Статус опции DVR:
|
|
isPlaying |
Логический тип |
Текущий статус воспроизведения:
|
|
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()