Стриминг
Плеер. API-документация для плеера
API позволяет управлять настройками плеера путём использования JavaScript, а также собирать данные о его использовании для дальнейшего анализа.
Инициализация плеера через iframe
Скопируйте iframe из настроек видео/потока в личном кабинете:
-
Для видео: раздел Все видео → Настройки → Экспорт → Код
-
Для потока: раздел Прямые трансляции → Настройки → Ссылки для экспорта → Код
Добавьте параметр id="eplayer" в iframe и вставьте его в код сайта.
Пример iframe кода из личного кабинета с добавлением id="eplayer":
<iframe width="640" height="360" src="https://demopage.edgevideo.ru/videos/79470_YJHUNNocCsrjiCDx" allow="autoplay;
clipboard-write" allowfullscreen frameborder="0" id="eplayer"></iframe>Где:
-
width — ширина плеера
-
height — высота плеера
-
src — URL загрузки контента (ссылка на видео или live поток)
-
allow="autoplay; clipboard-write" — атрибуты iframe, необходимые для работы некоторых функций плеера: разрешение на автовоспроизведение медиа и возможность копировать текст в буфер обмена (для кнопок Копировать в модальном окне Поделиться видео)
-
allowfullscreen — параметр разрешает полноэкранный режим для iframe
-
frameborder — рамка вокруг iframe, для скрытия необходимо установить значение «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" allow="autoplay;
clipboard-write" 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>
</body>
</html>Доступные события (Events)
|
Событие |
Возвращает |
Описание |
|
ready |
Плеер готов к воспроизведению |
|
|
play |
Воспроизведение запущено |
|
|
pause |
Воспроизведение поставлено на паузу |
|
|
stop |
Воспроизведение остановлено (для видео — возврат к началу ролика) |
|
|
ended |
Воспроизведение видео завершено |
|
|
seek |
Текущее время в секундах |
Видео воспроизводится |
|
resize |
Объект с текущими размерами |
Размер плеера был изменён |
|
fullscreen |
true/false |
Плеер был переведён в полноэкранный режим |
|
timeupdate |
Объект отсчёта времени |
Время в плеере было изменено |
|
volumeupdate |
Текущий уровень громкости |
Громкость звука плеера была изменена |
|
error |
Объект параметров ошибки |
Плеер получил ошибку |
|
progress |
Объект параметров состояния буфера |
|
|
levels |
Все имеющиеся качества (массив) |
|
|
tracks |
Список всех аудиодорожек (массив) |
|
|
|
Начало загрузки рекламного ролика | |
|
advertisementIsPlaying |
Объект параметров рекламы |
Начало воспроизведения рекламного ролика |
|
advertisementWasFinished |
|
Окончание загрузки или воспроизведения рекламного ролика (если он воспроизводился) |
Вызов методов плеера
Вызывать методы можно после события ready:
Доступные методы:
|
Название метода |
Тип данных |
Описание |
|
getCurrentTime |
Число |
Текущее время в секундах |
|
getDuration |
Число |
Длина видео в секундах |
|
getVolume |
Число от 0 до 100 |
Громкость |
|
isDvrEnabled |
Логический тип |
Статус опции DVR:
|
|
isPlaying |
Логический тип |
Текущий статус воспроизведения:
|
|
getCamerasList |
Массив строк (ID камер) |
Получить список камер (для Мультикамеры) |
|
getCurrentCamera |
Строка |
Получить ID активной камеры (для Мультикамеры) |
и
|
Название метода |
Тип данных |
Описание |
|
mute |
Выключает звук при воспроизведении |
|
|
unmute |
Включает звук при воспроизведении |
|
|
pause |
Ставит воспроизведение на паузу |
|
|
play |
Запускает воспроизведение |
|
|
stop |
Останавливает воспроизведение текущего видео (возврат к началу ролика) |
|
|
resize |
Объект с размерами плеера |
Изменяет границы плеера |
|
seek |
Число |
Перемотка воспроизведения (секунды) |
|
seekPercentage |
Число от 0 до 100 |
Перемотка воспроизведения (проценты) |
|
setVolume |
Число от 0 до 100 |
Устанавливает громкость для воспроизведения текущего видео |
|
changeCameraById |
Строка |
Устанавливает камеру по ID (для Мультикамеры) |
|
setLevel |
Строка |
Задаёт качество видео (auto, 240, 360 и т.д.) |
|
toggleFullscreen |
Включает/выключает полноэкранный режим плеера |
Шаблон вызова метода:
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.on('pause', () => {
console.log('[Event]', 'pause');
});
// изменяет размеры плеера
eplayerAPI.method({
name: 'resize',
params: { width: 300, height: 200 }
});
// перематывает видео и начинает показ со 2-ой минуты
eplayerAPI.method({
name: 'seek',
params: 120
});
// перематывает видео и начинает показ с середины
eplayerAPI.method({
name: 'seekPercentage',
params: 50
});
// установить автоматический выбор качества
eplayerAPI.method({
name: 'setLevel',
params: 'auto'
});
// установить качество 240
eplayerAPI.method({
name: 'setLevel',
params: '240'
});
};
</script>Завершение работы с плеером
Чтобы завершить работу с плеером, вызовите метод:
eplayerAPI.destroy();