Дополненная документация по встраиванию видео (плеера) на страницу и работа с Rutube Player API.
Встраивание iframe плеера на страницу:
<iframe width="720" height="405" src="https://rutube.ru/play/embed/9e4cd81a6b2566e9d949881dbb53905e/" style="border: none;" allow="clipboard-write; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>Передаваемые параметры в строку URL:
| Параметр | Значение | Описание |
|---|---|---|
| t | 3 | Время (сек.), с которого начинается воспроизведение видео |
| stopTime | endTime | 240 | Время (сек.), на котором заканчивается воспроизведение видео |
| q | quality | 360 | Параметр для настройки начального качества видео |
| autoplay | true | false | Автоматический запуск видео на странице |
| skinColor | e53935 | Цвет интерфейса плеера (HEX-модель) |
*
Пример:
https://rutube.ru/play/embed/9e4cd81a6b2566e9d949881dbb53905e/?t=3&stopTime=240&q=360&autoplay=true&skinColor=e53935Управлять загруженным плеером можно с помощью специального API, реализация которого основана на интерфейсе postMessage.
Отправка сообщения плееру через интерфейс postMessage:
const player = document.getElementById("player");
player.contentWindow.postMessage(
JSON.stringify({
type: "player:{METHOD}",
data: {}
}),
"*"
);ℹ️ Актуальность команд и их функционал действителен для плеера версии: 2.92.0-embed и выше.
| Команда (type) | Передаваемые данные (data) | Описание |
|---|---|---|
| player:play | — | Начать проигрывание видео |
| player:wakeup | — | Воспроизведение видео и восстановление загрузки ❓ |
| player:pause | — | Поставить видео на паузу |
| player:suspend | — | Остановка видео и прекращение загрузки ❓ |
| player:stop | — | Закончить цикл проигрывания (сброс буфера видео и рекламы) |
| player:setCurrentTime | { time: 20 } |
Переход к определенной секунде видео |
| player:relativelySeek | { time: +5 } |
Перемотать видео на определенное количество секунд вперед или назад |
| player:changeVideo | { id: "VIDEO_ID" } |
Загрузить другое видео для воспроизведения |
| player:unMute | — | Включить звук |
| player:mute | — | Выключить звук |
| player:setVolume | { volume: 0.2 } |
Установить значение громкости от 0 до 1 |
| player:setPlaybackSpeed | { speed: 2 } |
Установить скорость воспроизведения. Значения: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] |
| player:setSkinColor | { color: "5e35b1" } |
Изменить цвета интерфейса плеера (HEX-модель) |
| player:changeQuality | { quality: "240" } |
Изменить качество видео. Вызывайте данную команду после получения списка качеств у видео — событие player:qualityList |
| player:enterFullscreen | — | Переход в полноэкранный режим. После вызова, приходит сообщение от player:isFullscreen с проверкой состояния (boolean) ❗ |
| player:exitFullscreen | — | Выход из полноэкранного режима. После вызова, приходит сообщение от player:isFullscreen с проверкой состояния (boolean) |
| player:showControls | — | Отобразить элементы управления (вся нижняя панель и тайм-линия) 🚦 |
| player:hideControls | — | Скрыть элементы управления (вся нижняя панель и тайм-линия) 🚦 |
| player:exitNakedMode | — | Отобразить все элементы управления (Название видео, кнопка «поделиться», блок «подписаться», вся нижняя панель и тайм-линия) 🚦 |
| player:enterNakedMode | — | Скрыть все элементы управления (Название видео, кнопка «поделиться», блок «подписаться», вся нижняя панель и тайм-линия) 🚦 |
| player:setCaption | { current: CAPTION_ID, enabled: true | false } |
Установить и вывести субтитры. Список и идентификатор субтитров можно получить при вызове события player:playOptionsLoaded. Ключ enabled принимает значение (boolean) в зависимости от состояния отображения субтитров в видео |
| frame:checkOptions | — | Команда вызывает событие player:playOptionsLoaded и выводит объект JSON с полным списком атрибутов видео 🚦 |
*
*🚦 — не документированные команды.
*❓ — не безопасный метод.
Подписавшись на отслеживание сообщений от плеера можно получить информацию о его состоянии.
window.addEventListener("message", function (event) {
const message = JSON.parse(event.data);
console.log(message);
});
// {
// "type": "player:ready",
// "data": {
// "videoId": "9e4cd81a6b2566e9d949881dbb53905e",
// "clientId": "2bd3c203-ad59-4a56-b2a2-bf0c35f22539",
// "playerId": "video_frame"
// }
// }player:init — Инициализация плеера на странице.
player:ready — Плеер загружен и готов к проигрыванию (отправляется один раз, при вставке плеера на страницу). Ответ возвращает:
videoId— идентификатор текущего видеоclientId,playerId
player:get_stream_info — Сообщение возвращает информацию о трансляции. Доступно только при вставке трансляции на страницу. Ответ возвращает:
streamInfo— объект со списком атрибутов трансляции
player:isUserAdult — Сообщение возвращает информацию о возрасте пользователя для контента с подтверждением 18+. Пользователь должен быть авторизован на RUTUBE. Ответ возвращает:
value— значениеtrue | false
player:playStart — Видео запущено (отправляется один раз). Передаются данные о состоянии плеера, громкости, разрешении экрана и протоколе потоковой передачи контента
player:changeState — Изменилось состояние проигрывания видео. Ответ (state) возвращает:
playing— плеер перешел в состояние воспроизведения видеоpause— видео поставлено на паузу. В ранних версиях плеера использовалось значениеpaused⚠️ seeking— состояние плеера, когда пользователь самостоятельно выбрал время воспроизведения или перемотал видео. После выполнения приходит сообщениеplayer:cueChangeс привязкой времени к субтитрам, для их позиционирования.seeked— ⌛bufferingcompleted— плеер закончил воспроизведение видео
player:cueChange — ⌛
player:playComplete — Событие окончания проигрывания видео и рекламы. Переход плеера в end-screen.
player:controlsVisibilityChanged — Активны ли элементы управления. Дает понимание, взаимодействует ли пользователь в данный момент с плеером. Ответ возвращает:
visible— значениеtrue | false
player:playOptionsLoaded — Полный список атрибутов видео. Ответ возвращает:
playOptions— объект со списком атрибутом видео
ℹ️ Полный перечень доступных атрибутов доступен по ссылке: https://rutube.ru/api/play/options/{VIDEO_ID}
player:changeCaption — Информация о доступности субтитров, идентификаторе субтитров и включены ли они в данный момент. Ответ возвращает:
enabled— субтитры включеныcurrent— идентификатор субтитров видео. Список и идентификаторы субтитров можно получить при вызове события или при прослушивании:player:playOptionsLoaded
player:qualityList — Список качества видео. Ответ возвращает:
list— массив со значениями:[1080, 720, 480, 360, 240, 144]
player:currentQuality — Текущее качество видео
player:durationChange — Длительности видео (сек.). Ответ возвращает:
duration— продолжительность (сек.)
player:currentTime — Информация о текущем времени проигрывания видео. Ответ возвращает:
time— текущее время проигрывания (сек.)currentTime,duration
player:volumeChange — Информация о смене уровня громкости
volume— Значение от 0 до 1
player:playbackSpeedChanged — Cобытие возникает, когда пользователь изменяет скорость воспроизведения видео. Ответ возвращает:
speed— одно из значений:[0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
player:changeFullscreen — Информирует о том, что был выполнен переход в полноэкранный режим или выход из него. Ответ возвращает:
isFullScreen— значениеtrue | false
player:isFullscreen — Проверяет состояние «полноэкранного режима». Ответ возвращает:
isFullscreen— значениеtrue | false
player:error — Ошибка во время проигрывания. Ответ возвращает:
message— сообщение об ошибкеtype