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

Содержание

Что такое встраивание (embed) видео?

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

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

На данный момент доступно эмбедирование следующих типов контента:

Горизонтальное видео с доступом "Для всех"
Горизонтальное видео с доступом "Только по ссылке"
Короткие вертикальные ролики Shorts в формате горизонтального плеера с доступом "Для всех"
Короткие вертикальные ролики Shorts в формате горизонтального плеера с доступом "Только по ссылке"
Трансляция с доступом "Для всех"
Трансляция с доступом "Только по ссылке"

Как эмбедировать видео с RUTUBE?

Чтобы встроить (эмбедировать) видео с RUTUBE на сторонний сайт, нужно добавить код вставки плеера в код страницы, на которую хотите встроить плеер. Встроить можно любое видео с параметрами доступа "Для всех" и "Только по ссылке".

Найдите нужное видео на сайте RUTUBE и нажмите «Поделиться» → «Код вставки плеера».
Скопируйте код. Чтобы это сделать, кликните на код или на кнопку «Скопировать», либо нажмите на видео в плеере правой кнопкой мыши → «Скопировать код для вставки плеера»
Вставьте код вставки плеера в код страницы, на которую хотите встроить видео.

Как эмбедировать трансляцию с RUTUBE?

Чтобы встроить (эмбедировать) трансляцию с RUTUBE на сторонний сайт, нужно добавить код вставки плеера в код страницы, на которую хотите встроить плеер. Встроить можно любую трансляцию с параметрами доступа "Для всех" и "Только по ссылке".

Найдите нужную трансляцию на сайте RUTUBE и нажмите «Поделиться» → «Код вставки плеера»
Скопируйте код. Чтобы это сделать, кликните на код или на кнопку «Скопировать», либо нажмите на трансляцию в плеере правой кнопкой мыши → «Скопировать код для вставки плеера»
Вставьте код вставки плеера в код страницы, на которую хотите встроить трансляцию

Как эмбедировать видео через Студию RUTUBE?

Найдите нужное видео в Студии RUTUBE в разделе «Видео»: https://studio.rutube.moviesrussian.net/videos
Нажмите на «три точки» и выберите «Поделиться»
Выберите «Код вставки плеера» и скопируйте ссылку по кнопке «Скопировать»
Вставьте код вставки плеера в код страницы, на которую хотите встроить видео

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

Найдите нужное видео в Студии RUTUBE в разделе «Трансляции»: https://studio.rutube.moviesrussian.net/streams
Нажмите на «три точки» и выберите «Поделиться»
Выберите «Код вставки плеера» и скопируйте ссылку по кнопке «Скопировать»
Вставьте код вставки плеера в код страницы, на которую хотите встроить трансляцию

Как эмбедировать Shorts с RUTUBE?

Ролики Shorts можно эмбедировать только в формате горизонтального плеера.

Чтобы эмбедировать Shorts:

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

2. Замените слово «shorts» на «video» в ссылке на ролик (в адресной строке).

Например:

До - https://rutube.moviesrussian.net/shorts/a930fc3d073038eaf4fdc962e0e6b5cb/

После - https://rutube.moviesrussian.net/video/a930fc3d073038eaf4fdc962e0e6b5cb/

3. Нажмите Enter или перезагрузите страницу. Ролик откроется в горизонтальном плеере.

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

5. Вставьте код вставки плеера в код страницы, на которую хотите встроить видео.

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

Чтобы изменить размер окна плеера, цвет элементов управления, выбрать момент начала и конца воспроизведения, добавьте дополнительные параметры в код вставки плеера с помощью настроек параметров. Все изменения и дополнительные параметры отобразятся в коде для вставки, поэтому копируйте его только после их добавления и настройки.

В расширенной форме можно настроить следующие параметры:

1. Изменение размера окна плеера: замените размер в одном из полей в блоке «Размеры, px» на нужный. Второе поле подстроится автоматически, чтобы сохранить пропорции оригинального плеера.

2. Изменение цвета элементов плеера: нажмите «Изменить» в блоке «Основной цвет» и выберите нужный цвет из палитры.

3. Выбор моментов начала и конца воспроизведения: поставьте галочку в чекбоксе «Начало» и/или «Конец» добавьте таймкод нужного момента. Выбор часов будет доступен, только если видео длится больше 59 минут 59 секунд. Если указать значение 99 минут, то оно автоматически пересчитается в часы и остаток в минутах. Аналогично пересчитываются секунды в минуты.

Настройки параметров в коде вставки

После вставки кода видео в код страницы в него можно вносить дополнительные изменения параметров, меняя значения в коде вставки.

Пример

Стандартный код вставки плеера без дополнительных настроек параметров для встраивания видео из общего доступа по ссылке https://rutube.moviesrussian.net/play/embed/7716bd3e665725c3c008ae7ab4ff02e2:

Код вставки этого же видео с дополнительными настройками параметров: размером окна плеера 864х486 пикселей, с красным цветом интерфейса, началом воспроизведения с 5й минуты и окончанием на отметке 8 минут с отображением названия видео и имени автора канала.

Код для вставки:

Подробнее:

width="864" height="486" — ширина и высота окна плеера,
https://rutube.moviesrussian.net/play/embed/7716bd3e665725c3c008ae7ab4ff02e2 — эмбедироваванная ссылка на видео,
skinColor=e53935 — основной цвет интерфейса (красный),
t=300 — время в секундах, с которого начнётся воспроизведение (300 секунд = 5 минут),
stopTime=480 — время в секундах, на котором воспроизведение завершится (480 секунд = 8 минут),
frameborder — параметр, отвечающий за активацию рамки по периметру окна плеера. Может задаваться значением 1 (вкл) и 0 (выкл, по умолчанию),
allow="clipboard-write; autoplay" — параметры управления буфером копирования и автоматическим запуском видео, если выполнены все условия для автоматического запуска,
webkitAllowFullScreen mozallowfullscreen — фрагмент кода, который позволяет запускать плеер в полноэкранном режиме на устаревших версиях браузеров,
allowFullScreen — фрагмент кода, отвечающий за активацию функции полноэкранного просмотра из эмбеда. Если его удалить из кода, то функция будет недоступна,
<a href="https://rutube.moviesrussian.net/video/7716bd3e665725c3c008ae7ab4ff02e2/">«Тотальный футбол»: топовый дебют Миранчука, как поменять наш футбол – реформы Гогниева</a> — фрагмент кода, который отвечает за отображение названия видео; содержит ссылку на встариваемое видео и его название,
<a href="//rutube.moviesrussian.net/metainfo/tv/23137/">Тотальный футбол</a> — фрагмент кода, который отвечает за отображение автора канала, с которого взято видео,
<a href="https://rutube.moviesrussian.net/">RUTUBE</a> — фрагмент кода, который отображает ссылку на видеохостинг и название RUTUBE. Добавляется при проставлении галочки «Показывать название видео».
q (quality) — параметр для настройки начального качества видео. Доступные значения: 144, 240, 360, 480, 720, 1080, 1440, 2160, auto Если у пользователя имеется сохраненное качество видео от предыдущих просмотров, именно оно будет выбрано для инициализации,
autoplay={true|false} — переопределяет значение параметра auto_start настроенного на сервере.

Как встроить на сайт приватное видео, доступное только по прямой ссылке, через Студию RUTUBE?

Чтобы встроить видео, доступное только по прямой ссылке, понадобится ключ доступа. Его можно скопировать из прямой ссылки на видео.

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

Пример прямой ссылки на видео с его ID и ключом доступа: https://rutube.moviesrussian.net/video/private/caafe83ff1c6ed38d394635b83ece578/?p=IBgzQQrKH4qB1bqm_91x7Q

Шаг 2. Откройте видео по скопированной ссылке и нажмите «Поделиться» → «Код для вставки»

Пример кода вставки с ID видео без ключа доступа:

Шаг 3. Скопируйте из ссылки в браузере ключ доступа — всё после последнего «/» — и добавьте этот кусок в код вставки видео через слэш «/» сразу после ID видео.

Все ключи видео начинаются с «/?p=».

Пример кода вставки с ID видео и с ключом доступа:

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

Если у вас возникли сложности, напишите нам на [email protected]

Как встроить на сайт приватную трансляцию, доступную только по прямой ссылке, через Студию RUTUBE?

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

Шаг 2. Откройте видео по скопированной ссылке и нажмите «Поделиться» → «Код для вставки»

Пример кода вставки с ID видео без ключа доступа:

Все ключи видео начинаются с «/?p=».

Пример кода вставки с ID видео и с ключом доступа:

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

Если у вас возникли сложности, напишите нам на [email protected]

Расширенные параметры для встраивания видео с RUTUBE и управления плеером

Настройка воспроизведения

Чтобы встроить плеер RUTUBE на HTML-страницу, нужно добавить тэг iframe вида:

В нём:

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

{id_video_params} — внутренний ID видео на RUTUBE, к которому добавляются дополнительные параметры в формате:

{id_video_params}: {id_video}[?{параметр}[&{параметр}[&{параметр}]]]

где {параметр} — один из трёх возможных параметров:

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

skinColor — цвет элементов управления плеера; задаётся 16-ричным кодом, который содержит в себе информацию об интенсивности красного, зеленого и синего цветов. Например, "skinColor=7cb342";

getPlayOptions — параметр, который вызывает событие "player:playOptionsLoaded", см. раздел «Управление плеером». Параметр должен сопровождаться перечнем атрибутов. Например, параметр "getPlayOptions=pg_rating,is_adult,is_licensed,duration,title" вызывает событие "player:playOptionsLoaded", параметр "data" которого содержит полную информацию об атрибутах верхнего уровня pg_rating,is_adult,is_licensed,duration,title.

Обратите внимание: в параметре можно указать только атрибуты верхнего уровня. Если для работы страницы нужен вложенный атрибут, укажите его верхнего «родителя».
Полный перечень доступных атрибутов доступен по ссылке https://rutube.moviesrussian.net/api/play/options/{id_video} . Вместо {id_video} необходимо подставить id конкретного видео.

Пример встраивания плеера RUTUBE с параметрами:

Автоподстройка размера для нестандартных окон и мобильных устройств

Чтобы размер окна плеера RUTUBE подстраивался под размер страницы, тэг iframe можно «обернуть» в тэг div так:

Обратите внимание: в изменённом коде параметры {width} и {height} переехали из тэга iframe в тэг div.

Пример встраивания плеера RUTUBE с параметрами и автоподстройкой размера:

Пример поведения окна встроенного плеера RUTUBE с автоподстройкой размера и без неё:

HTML-файл с кодом примера: Example01_Player_div.html

В примере видно, как работает автоподстройка размера видео. Чтобы проверить, меняйте размер окна браузера во время воспроизведения видео.

Управление плеером

Плеер может принимать и исполнять ряд команд. Команда передаётся плееру при помощи механизма postMessage() из кода javascript:

<body>
<iframe id='my-player'src="https://rutube.moviesrussian.net/play/embed/{id_video_params}" {другие параметры}>
</iframe>
</body>

<script type="text/javascript">
function doCommand() {
var player = document.getElementById('my-player');
player.contentWindow.postMessage(JSON.stringify({CommandJSON}), '*');
}

...
</script>

Где

'my-player' — имя тэга <iframe>, содержащего плеер;
{id_video_params} — внутренний ID видео на RUTUBE с дополнительными параметрами;
{CommandJSON} — команда и её параметры в формате JSON.

... - вызовы части команд, управляющих плеером с помощью CommandJSON (см. ниже)

Стандартный формат команды CommandJSON:

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

, где

{type} — тип команды;
{data} — параметры команды в формате JSON.

Примеры команд, управляющих плеером:

function do_pause() { doCommand( {type:'player:pause', data:{} } ); }
function do_changeVideo() { doCommand( {type:'player:changeVideo', data:{id:'aaf9fbe99fd8400d6096ef5cc1af404c'}} ); }
function do_setSkinColor() { doCommand( {type:'player:setSkinColor', data: color: Color value is invalid } ); }
function do_VolumeDown() { doCommand( {type:'player:setVolume', data: {change: -0.1} } ); }

Параметры команд, управляющих плеером, передаваемые в doCommand:

Для корректного воспроизведения, отправлять это событие стоит после готовности плеера (событие player:ready)

(Актуально для команд player:play, player:pause, player:stop)

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

{

type: 'player:play',

data: {}

}

// player:pause Поставить видео на паузу

{

type: 'player:pause',

data: {}

}

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

{

type: 'player:stop',

data: {}

}

// player:suspend Остановка видео и прекращение загрузки. Не безопасный метод.

Используется в сочетании с player:wakeup

{

type: 'player:susupend',

data: {}

}

// player:wakeup Воспроизведение видео и восстановление загрузки. Обычно используется после player:suspend , для восстановления загрузки

{

type: 'player:susupend',

data: {}

}

//player:setCurrentTime Установка текущего времени воспроизведения

{

type: 'player:setCurrentTime',

data: {

time: 20 // время в секундах

}

// player:relativelySeek Перемотать видео на определённое количество секунд вперёд или назад. time — количество секунд для перемотки,

// (знак минус «−») — перемотка назад,

// (без знака) — перемотка вперёд

{

type: 'player:relativelySeek',

data: {

time: 20 // time:20 - перемотка вперед, time: -20 - перемотка назад

}

// player:changeVideo Загрузить в плеер другое видео

{

type: 'player:changeVideo',

data: {

id: 'xyz123' // id ролика

params: {

quality:'1080' // Доступные значения: 144, 240, 360, 480, 720, 1080, 1440, 2160, auto

}

// player:changeQuality С помощью этого события можно изменить текущее качество видео

Для корректного изменения, отправлять это событие стоит после загрузки списка качеств у видео (событие player:qualityList)

{

type:'player:changeQuality',

data:

{

quality:'1080'// уровень качества

}

// player:setSkinColor Изменить цветовую схему

{

type: 'player:setSkinColor',

data: {

color: '39a939' // цвет в RGB, HEX (без решётки «#»)

}

// player:mute Отключить звук

{

type: 'player:mute'

}

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

{

type: 'player:unMute'

}

// player:setVolume — Установить уровень громкости

{

type: 'player:setVolume',

data: {

volume: 0.20 //значение от 0 до 1

}

// Или изменить уровень громкости

// (знак минус «−») — тише,

// (знак плюс «+») — громче,

{

type: 'player:setVolume',

data: {

change: 0.20 //значение от 0 до 1

}

Пример управления плеером на странице:

HTML-файл с кодом примера управления плеером: Example02_Player_postMessage.html

События плеера и отслеживание статуса проигрывания

Пример подписки на сообщения от плеера:

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

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

console.log(message.type); // some type

switch (message.type) {

case 'player:changeState':

console.log(message.data.state); // Текущее состояние плеера

break;

};

});

Шаблон приходящих сообщений:

{

"type": 'player:type',

"data": 'some data'

}

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

Перечень типов сообщений "type" и структура значений параметра "data"

player:ready // Плеер загружен готов к воспроизведению. Отправляется один раз, при вставке плеера на страницу.

data: {

"clientId":<strAlphanumeric>,

"videoId":<strAlphanumeric>,

"playerId":<strAlphanumeric>

}

player:init // Отправляется после того как загружены данные для воспроизведения и выбран тип провайдера

data: {

"clientId":<strAlphanumeric>,

"videoId":<strAlphanumeric>,

"playerId":"video_frame" // идентификатор плеера, всегда один и тот же;

}

player:playOptionLoaded // Отправляется при наличии в query параметра getPlayOptions с перечислением ключей, которые хотим получить из запроса /api/play/options/57e1cb24939d657284dc2900deb5949a/

Например:

?getPlayOptions=id,thumbnail_url

data: {

"id"

19749029

"thumbnail_url"

"<https://pic.rutube.moviesrussian.net/video/fc/cb/fccb074292c8f1ddff6ddb4ee5c8c723.jpg>"

"playerId"

"video_frame"

}

player:changeState // Изменилось состояние проигрывания

data: {

"state":<strAlpha>,// Значения:

// playing — началось воспроизведение видео,

// paused — видео на паузе,

// stopped — конец воспроизведения видео,

"isLicensed":<boolean>, //автор видео имеет статус лицензионного автора

"playerId":<strAlphanumeric>

}

player:rollState // Информация о факте и статусе проигрывания рекламы в плеере

data: {

"type":"preroll5",// название рекламы *preroll*, *midroll*, *postroll*

"state":"complete",// старт или окончание рекламы play / complete

"playerId":"video_frame"

}

player:durationChange // Обновление/уточнение длительности видео

data: {

"duration":<Number>,// Длительность видео в секундах

"playerId":<strAlphanumeric>

}

player:adRequest // Отправляется после загрузки данных по рекламе

data: {

"aformat":"preroll4",// название рекламы *preroll*, *midroll*, *postroll*

"did":"5c6182bc6da219ea5c71003b7055cd3b",// fingerprint id

"videoId": "57e1cb24939d657284dc2900deb5949a",// идентификатор видео

"e":"a_request",// название события для логирования

"axurl":"<https://rutube.moviesrussian.net/adfoxsdk?ownerId=240202&p1=bsxkf&p2=fetu&gowast_title=Промо&puid7=0&puid2=22&puid3=28880952>",// URL для получения рекламы

"playerId":"video_frame"

}

player:adStart // Отправляется после старта рекламы

data: {

"aformat":"preroll4",// название рекламы *preroll*, *midroll*, *postroll*

"did":"5c6182bc6da219ea5c71003b7055cd3b",// fingerprint id

"videoId":"57e1cb24939d657284dc2900deb5949a",// идентификатор видео

"e":"a_start",// название события для логирования

"axurl":"<https://rutube.moviesrussian.net/adfoxsdk?ownerId=240202&p1=bsxkf&p2=fetu&gowast_title=Промо&puid7=0&puid2=22&puid3=28880952>",// URL для получения рекламы

"playerId":"video_frame"

}

player:adEnd // Отправляется после успешного завершения рекламы

data: {

"aformat":"preroll4",// название рекламы *preroll*, *midroll*, *postroll*

"did":"5c6182bc6da219ea5c71003b7055cd3b",// fingerprint id

"videoId":"57e1cb24939d657284dc2900deb5949a",// идентификатор видео

"e":"a_end",// название события для логирования

"axurl":"<https://rutube.moviesrussian.net/adfoxsdk?ownerId=240202&p1=bsxkf&p2=fetu&gowast_title=Промо&puid7=0&puid2=22&puid3=28880952>",// URL для получения рекламы

"playerId":"video_frame"

}

player:durationChange // Обновление/уточнение длительности видео отправляется при изменении длительности видео (например при стриминге)

data: {

"duration":<Number>,// Длительность видео в секундах

"playerId":<strAlphanumeric>

}

player:adStart // Отправляется после старта рекламы

data: {

"aformat":"preroll4",// название рекламы *preroll*, *midroll*, *postroll*

"did":"5c6182bc6da219ea5c71003b7055cd3b",// fingerprint id

"videoId":"57e1cb24939d657284dc2900deb5949a",// идентификатор видео

"e":"a_start",// название события для логирования

"axurl":"<https://rutube.moviesrussian.net/adfoxsdk?ownerId=240202&p1=bsxkf&p2=fetu&gowast_title=Промо&puid7=0&puid2=22&puid3=28880952>",// URL для получения рекламы

"playerId":"video_frame"

}

player:currentTime // Информация о текущем моменте воспроизведения видео

data: {

"time":<Number>,// Текущий момент воспроизведения видео в секундах

"playerId":<strAlphanumeric>

}

player:buffering

data: {

"range": [

{

"start":0,

"end":0

{

"start":<Number>,

"end":<Number>

}

"playerId":<strAlphanumeric>

}

player:volumeChange // Информация о смене уровня громкости

data: {

"volume":<strNumeric>,// Текущий уровень громкости от 0 до 1

"muted":<boolean>,

"playerId":<strAlphanumeric>

}

player:changeFullscreen // Переход/выход из полноэкранного режима

data: {

"isFullscreen":<boolean>,

"playerId":<strAlphanumeric>

}

player:error // Ошибка во время проигрывания

data: {

"code": <strNumeric>,

"text": <strAlphanumeric>,

"playerId":<strAlphanumeric>

}

player:playComplete // Окончание воспроизведения видео и рекламы. Переход плеера на финальный экран

data: {

"playerId":<strAlphanumeric>

}

player:playStart // Первый старт проигрывания

data: {

"video_id":"e30edf24ea097b45d0d469fac449478c",// идентификатор видео

"qa":true,// автокачество

"sm":"default",// отображение плера default/cinema

"yclid":"1715854197193969726",// global client id

"viewid":"339f02f2c72f0d0f2676c1ec6c069d3b",// REQUEST_ID из метаданных запроса или, если он отсутствует в запросе, тут же сгенерированный новый UUID4

"":null,// идентификатор пользователя, если он залогинен

"cid":"d65fba3c-75a7-450d-b273-4e86b0569791",// uuid?

"pid":"c97972a0-8269-402a-82e3-0192366dc98b",// guid?

"referer":"http%3A%2F%2Flocalhost%3A8080",// страница проигрывания

"v":100,// Уровень звука

"q_w":1920,// Ширина активного уровня качества

"q_h":1080,// Высота активного уровня качества

"tr":"hls",// Тип провайдера

"playerId":"video_frame"

}

player:currentQuality // Отправляется при изменении текущего уровня качества видео

data: {

"quality":

{"height":1080, // высота для текущего качества

"quality":"1080",// текущее качество

"isAutoQuality":false// выбрано ли качество автоматически

"playerId":"video_frame"

}

player:currentQuality // Текущее качество видео

data: {

"quality":{

"height":<Number>

"playerId":<strAlphanumeric>

}

player:qualityList // Текущее качество видео, отправляется после загрузки уровней качества видео

data: {

"list":[<Number>,...,<Number>]// Перечень значений качества, доступных для этого видео, например [232,360,480,720,1080]

"playerId":<strAlphanumeric>

}

player:showControls // Позволяет отображать все контроллы в плеере.

{

type:'player:showControls'

}

player:hideControls // Позволяет скрывать все контроллы в плеере.

{

type:'player:hideControls'

}

player:playOptionsLoaded

data: {

"playerId":<strAlphanumeric>

}

, где

<strAlphanumeric> — текстовая строка в кавычках;

<strNumeric> — последовательность цифр / число в кавычках;

<Number> — число;

<boolean> — логическое значение true или false;

<attributes> — атрибуты видео, доступные также по "https://rutube.moviesrussian.net/api/play/options/{id_video}", но только те, которые перечислены в параметре getPlayOptions, см. «Настройка воспроизведения встроенного видео». Атрибуты также частично описаны в следующем разделе «Получение атрибутов видео».

Пример кода, управляющего плеером, с учётом его статуса:

HTML-файл с кодом: Example03_Player_events.html

В примере:

видео начинает воспроизводиться с 100-й секунды,
по достижении 4-х минут воспроизведение продолжается с начала 2-й минуты и далее по циклу,
если принудительно перемотать проигрывание дальше 4:10, видео продолжает воспроизводиться до конца,
по достижении конца видео проигрывание переходит к началу 2-й минуты и приостанавливается,
под видео отображается информация, полученная из события "playOptionsLoaded".