FAQ: Встраивание видео с RUTUBE

Что такое встраивание видео с RUTUBE

Эмбед или эмбедирование — функция, которая позволяет встраивать плеер RUTUBE с конкретным видео на сторонние вебстраницы. Код вставки строится на базе HTMLтега и подходит для видео, трансляций и Shorts.

Какие видео и трансляции можно встраивать

Сейчас RUTUBE позволяет встраивать:

горизонтальное видео с доступом «Для всех»;

горизонтальное видео с доступом «Только по ссылке»;

короткие вертикальные ролики Shorts в формате горизонтального плеера с доступом «Для всех»;

короткие вертикальные ролики Shorts в формате горизонтального плеера с доступом «Только по ссылке»;

трансляции с доступом «Для всех»;

трансляции с доступом «Только по ссылке».

Как встроить видео с RUTUBE на сайт

1. Откройте нужное видео на сайте RUTUBE и нажмите «Поделиться» → «Код вставки плеера».

2. Скопируйте код: нажмите на сам код, кнопку «Скопировать» или в плеере нажмите правой кнопкой мыши → «Скопировать код для вставки плеера».

3. Вставьте код в HTMLстраницу, на которой должен отображаться плеер.

В мобильной вебверсии RUTUBE код можно скопировать из меню плеера: «Настройки» → «Ещё» → «Скопировать код для вставки плеера».

Как встроить трансляцию с RUTUBE

Действия аналогичны: откройте трансляцию, нажмите «Поделиться» → «Код вставки плеера», скопируйте код и вставьте его в страницу. В мобильной вебверсии используйте «Настройки» → «Ещё» → «Скопировать код для вставки плеера».

Как встроить видео или трансляцию через Студию RUTUBE

Для видео: откройте раздел «Видео», нажмите на «три точки» у нужного ролика и выберите «Поделиться» → «Код вставки плеера». Скопируйте код и вставьте его на страницу.

Для трансляций: откройте раздел «Трансляции», нажмите на «три точки» и выберите «Поделиться» → «Код вставки плеера».

Как встроить Shorts с RUTUBE

Shorts встраиваются только в горизонтальном плеере.

1. Откройте нужный ролик.

2. В адресной строке замените shorts на video. Например:

До: https://rutube.ru/shorts/a930fc3d073038eaf4fdc962e0e6b5cb/

После: https://rutube.ru/video/a930fc3d073038eaf4fdc962e0e6b5cb/

3. Нажмите Enter или перезагрузите страницу.

4. Скопируйте код вставки: «Поделиться» → «Код вставки плеера».

5. Вставьте код в HTMLстраницу.

Как встроить приватное видео или трансляцию по прямой ссылке

Для контента с доступом «Только по ссылке» нужен ключ доступа. Его можно взять из прямой ссылки на видео.

1. Откройте видео с ограниченным доступом в Студии RUTUBE и скопируйте ссылку. Пример ссылки с ID и ключом доступа:

2. Откройте видео по этой ссылке и нажмите «Поделиться» → «Код для вставки». Без ключа код будет выглядеть так:

3. Скопируйте из ссылки в браузере ключ доступа — всё после последнего / — и добавьте его в src сразу после ID видео через слэш. Все ключи начинаются с /?p=. Пример:

Если встроить код без ключа доступа, видео не будет воспроизводиться. Та же инструкция подходит для приватной трансляции через Студию RUTUBE.

Дополнительные возможности кода вставки

В диалоге «Поделиться» можно изменить:

размер окна плеера в блоке «Размеры, px» — второе поле подстроится автоматически для сохранения пропорций;

основной цвет элементов плеера через блок «Основной цвет»;

момент начала и конца воспроизведения через чекбоксы «Начало» и «Конец» и таймкоды. Поле часов становится доступно, только если видео длится больше 59 минут 59 секунд. Если указать 99 минут, значение автоматически пересчитается в часы и минуты; аналогично пересчитываются секунды.

Стандартный код вставки:

```html

```

Пример кода с настройками — плеер 864×486 px, красный цвет интерфейса, старт с 5й минуты, окончание на 8й минуте:

Основные параметры из примера:

width="864" height="486" — ширина и высота окна плеера;

autostartmute=true/false — запуск видео без звука или со звуком;

skinColor=e53935 — основной цвет интерфейса;

t=300 — время в секундах, с которого начнётся воспроизведение (300 секунд = 5 минут);

stopTime=480 — время в секундах, на котором воспроизведение завершится (480 секунд = 8 минут);

frameborder — рамка по периметру окна плеера: 1 — включена, 0 — выключена (по умолчанию);

allow="clipboardwrite; autoplay" — разрешение на работу с буфером копирования и автоматический запуск;

webkitAllowFullScreen mozallowfullscreen — поддержка полноэкранного режима в старых версиях браузеров;

allowFullScreen — активация полноэкранного режима из embed; если удалить параметр, функция станет недоступна;

q (quality) — начальное качество видео. Доступные значения: 144, 240, 360, 480, 720, 1080, 1440, 2160, auto. Если у пользователя сохранено качество с прошлых просмотров, будет использовано оно;

autoplay={true|false} — переопределяет параметр autostart, настроенный на сервере.

Расширенная настройка плеера RUTUBE

Базовый iframe

<iframe width="{width}" height="{height}" src="https://rutube.ru/play/embed/{idvideoparams}"

frameBorder="0" allow="clipboardwrite; autoplay" webkitAllowFullScreen mozallowfullscreen allowFullScreen

{width}, {height} — ширина и высота плеера. Чтобы видео отображалось корректно, сохраняйте стандартные пропорции плеера.

{idvideoparams} — внутренний ID видео на RUTUBE с дополнительными параметрами в формате:

{idvideo}[?{параметр}[&{параметр}[&{параметр}]]]

Доступные параметры:

t — момент начала воспроизведения в секундах, например t=9876;

skinColor — цвет элементов управления плеера в 16ричном формате, например skinColor=7cb342;

getPlayOptions — вызывает событие player:playOptionsLoaded. Параметр должен содержать перечень атрибутов верхнего уровня, например getPlayOptions=pgrating,isadult,islicensed,duration,title. Вложенные атрибуты указывать нельзя, только их родителя. Полный список атрибутов доступен по ссылке https://rutube.ru/api/play/options/{idvideo}.

Пример iframe с параметрами:

<iframe width="1066" height="600" frameBorder="0" allow="clipboardwrite; autoplay"

src="https://rutube.ru/play/embed/7716bd3e665725c3c008ae7ab4ff02e2?getPlayOptions=pgrating,isadult&skinColor=7cb342&t=6040"

webkitAllowFullScreen mozallowfullscreen allowFullScreen

Автоподстройка размера плеера

Чтобы плеер подстраивался под ширину страницы и корректно работал на мобильных, оберните iframe в :

<iframe width="100%" height="100%" src="https://rutube.ru/play/embed/{idvideoparams}"

frameBorder="0" allow="clipboardwrite" allowFullScreen

Обратите внимание: {width} и {height} в этом варианте переходят в стили div. Пример:

<iframe width="100%" height="100%" src="https://rutube.ru/play/embed/7716bd3e665725c3c008ae7ab4ff02e2?t=6040"

frameBorder="0" allow="clipboardwrite" webkitAllowFullScreen mozallowfullscreen allowFullScreen

Работу адаптивного плеера можно проверить в файле Example01Playerdiv.html.

Управление плеером через postMessage

Плеер RUTUBE принимает команды через postMessage(). Пример базовой отправки:

function doCommand() {

var player = document.getElementById('myplayer');

player.contentWindow.postMessage(JSON.stringify({CommandJSON}), '');

}

...

Формат команды:

```javascript

doCommand({type:typeValue, data:dataValue});

Поддерживаемые команды:

player:play — начать воспроизведение;

player:pause — поставить на паузу;

player:stop — закончить цикл воспроизведения и сбросить буфер видео и рекламы;

player:suspend — остановить видео и прекратить загрузку (используется с player:wakeup);

player:wakeup — возобновить воспроизведение и загрузку после player:suspend;

player:setCurrentTime — установить время воспроизведения, data: {time: 20};

player:relativelySeek — перемотать на N секунд: data: {time: 20} — вперёд, data: {time: 20} — назад;

player:changeVideo — загрузить другое видео, data: {id: 'xyz123', params: {quality: '1080'}};

player:changeQuality — изменить качество, data: {quality: '1080'};

player:setSkinColor — изменить цвет, data: {color: '39a939'} (RGB HEX без );

player:mute — отключить звук;

player:unMute — включить звук;

player:setVolume — установить громкость, data: {volume: 0.20} или изменить её: data: {change: 0.20} (минус — тише, плюс — громче);

player:showControls — показать контролы;

player:hideControls — скрыть контролы.

Для команд player:play, player:pause и player:stop дождитесь события player:ready. Для player:changeQuality дождитесь события player:qualityList. Пример управления плеером — в файле Example02PlayerpostMessage.html.

События плеера

Подписаться на события можно так:

window.addEventListener('message', function (event) {

var message = JSON.parse(event.data);

console.log(message.type);

switch (message.type) {

case 'player:changeState':

console.log(message.data.state);

break;

};

});

Основные события и данные:

player:ready — плеер загружен и готов к воспроизведению. Отправляется один раз при вставке плеера. Данные: clientId, videoId, playerId.

player:init — загружены данные для воспроизведения и выбран тип провайдера. Данные: clientId, videoId, playerId.

player:playOptionsLoaded — отправляется, если в query указан getPlayOptions. Данные: запрошенные атрибуты и playerId.

player:changeState — изменилось состояние воспроизведения. state может быть playing, paused, stopped; также передаются isLicensed и playerId.

player:rollState — статус рекламы: type (preroll, midroll, postroll), state (play или complete), playerId.

player:durationChange — обновилась длительность видео: duration (в секундах), playerId.

player:adRequest, player:adStart, player:adEnd — события рекламы: aformat, did, videoId, e, axurl, playerId.

player:currentTime — текущий момент воспроизведения: time, playerId.

player:buffering — статус буферизации: range, playerId.

player:volumeChange — изменение громкости: volume, muted, playerId.

player:changeFullscreen — переход в полноэкранный режим или выход из него: isFullscreen, playerId.

player:error — ошибка воспроизведения: code, text, playerId.

player:playComplete — воспроизведение видео и рекламы завершено, плеер перешёл на финальный экран.

player:playStart — первый старт проигрывания. Содержит служебные данные: videoid, qa, sm, yclid, viewid, user, cid, pid, referer, v, qw, qh, tr, playerId.

player:currentQuality — текущее качество: quality с полями height, quality, isAutoQuality, и playerId.

player:qualityList — список доступных качеств: list, например [232,360,480,720,1080], и playerId.

Шаблон сообщения от плеера:

```json

{"type": 'player:type', "data": 'some data'}

Пример управления плеером с учётом событий — в файле Example03Playerevents.html. В нём видео стартует со 100й секунды, при достижении 4 минут проигрывание переходит на начало 2й минуты, затем повторяется; если перемотать дальше 4:10, видео доигрывается до конца; после конца воспроизведение останавливается на начале 2й минуты.

Поддержка

Если у вас возникли сложности, напишите на help@rutube.ru или в бот поддержки: https://max.ru/rutubesupportbot.

Полезно: документация или схема помогают быстрее заметить новые возможности и уточнения API.

Риск: изменение контракта может потребовать правок в интеграции, генерации типов или пользовательских сценариях.