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

Загруженные видео можно разместить на любом сайте или в блоге. Для этого нужно получить код вставки в интерфейсе Видеохостинга или через API.

На вкладке Контент выберите передачу, а на странице передачи — нужный выпуск. В строке выпуска нажмите  → Код вставки.

Вы можете настроить отображение плеера и воспроизведение видео с помощью опций:

  • Без звука — при загрузке плеера выключен звук.
  • Автостарт — при загрузке плеера видео запускается автоматически.
  • Показывать элементы управления — показываются элементы управления плеером.
  • Зацикленное видео — после окончания видео запускается сначала без дополнительных действий.
  • Трагический контент без рекламы — трагическое видео, поэтому показывается без рекламы.

Автоматически сформируется код вставки с нужными параметрами. В примере ниже видео будет запущено автоматически, но без звука и рекламы:

<iframe 
  src="https://frontend.vh.yandex.ru/player/{video_content_id}?from=partner&autoplay=1&mute=1" 
  allow="autoplay; encrypted-media; screen-wake-lock" frameborder="0" allowfullscreen>
</iframe>

Нажмите кнопку Скопировать.

Код вставки можно получить с помощью такого запроса:

GET https://backend.vh.yandex.ru/api/v1/{channel_id}/{library_id}/{video_id}

где

  • channel_id — идентификатор канала.
  • library_id — идентификатор библиотеки.
  • video_id — идентификатор видео.

Ниже приведен пример ответа. URL кода вставки возвращается в свойстве embed_url.

HTTP/1.1 200 OK
Content-Type: application/json

{
  "update_time": "{YYYY-MM-DDTHH:MM:SS}", 
  "embed_url": "https://frontend.vh.yandex.ru/player/{video_content_id}", 
  "description": "Video description", 
  "encode_status": "converted", 
  "parent_id": "{parent_id}", 
  "create_time": "{YYYY-MM-DDTHH:MM:SS}", 
  "id": "{video_id}", 
  "name": "My Video"
}

Подробнее в документации API Видеохостинга.

Чтобы получить код вставки, укажите в атрибуте src тега iframe значение свойства embed_url. Добавьте к URL параметр ?from=partner — он необходим для корректного сбора статистики.

<iframe 
  src="https://frontend.vh.yandex.ru/player/{video_content_id}?from=partner" 
  allow="autoplay; encrypted-media; screen-wake-lock" frameborder="0" allowfullscreen>
</iframe>

Код вставки содержит iframe-контейнер, в котором отображается плеер с указанным видео. Разместите код вставки на нужной веб-странице. Вы можете настроить размер видео и параметры запуска плеера. Встроенное видео заработает в течение 30 минут.

Как настроить размер видео

Чтобы указать размер видео, задайте параметры height (высота) и width (ширина) тега iframe. Например:

<iframe width="560" height="315" 
  src="https://frontend.vh.yandex.ru/player/{video_content_id}?from=partner" 
  allow="autoplay; encrypted-media; screen-wake-lock" frameborder="0" allowfullscreen>
</iframe>

Если вы хотите, чтобы видео подстраивалось под ширину контейнера, измените код вставки так:

<div style="min-width: 100%">
  <div style="position: relative; padding-bottom: 56.25%; height: 0;">
    <iframe src="https://frontend.vh.yandex.ru/player/{video_content_id}?from=partner" 
      allow="autoplay; encrypted-media; screen-wake-lock" frameborder="0" allowfullscreen 
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
    </iframe>
  </div>
</div>

Параметры запуска плеера

Вы можете настроить отображение плеера и воспроизведение видео с помощью специальных параметров. К URL кода вставки после ? добавьте пары параметр=значение, разделяя их &:

https://frontend.vh.yandex.ru/player/{video_content_id}?from=partner&{param1=value1}&...&{paramN=valueN}

URL всегда должен содержать параметр from=partner. Он необходим для корректного сбора статистики. Если вы получаете код вставки через интерфейс, он добавляется автоматически. При получении через API нужно прописать этот параметр вручную.

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

Параметр:

Описание:

allow_muted

Автоматически запускать видео без звука при загрузке плеера:

  • false — автовоспроизведение без звука запрещено.
  • true — автовоспроизведение без звука разрешено.

Параметр allow_muted имеет приоритет перед autoplay. При использовании allow_muted=false автовоспроизведение произойдет только в случае, если оно возможно со звуком.

autoplay

Автоматически запускать видео при загрузке плеера:

  • 0 — видео не запускается автоматически.
  • 1 — видео запускается автоматически.

Значение по умолчанию — 0.

Чтобы автозапуск видео корректно работал во всех браузерах, используйте параметр autoplay=1 вместе с параметром mute=1.

event_prefix

Префикс для postMessage-сообщений от плеера.

Строка. Например, event_prefix=player-event.

hidden

С помощью параметра можно скрыть элементы интерфейса плеера. По умолчанию отображаются все.

Список элементов интерфейса
  • * — все элементы интерфейса.
  • contextMenu — контекстное меню.
  • fullscreen — кнопка перевода в полноэкранный режим.
  • live — кнопка Вернуться в эфир.
  • logoWidget — виджет Подписаться.
  • mobileSeekButtons — кнопки перемотки в мобильном интерфейсе.
  • nextAdInfo — время до старта показа рекламы.
  • play — элемент интерфейса, в котором отображаются кнопки Воспроизвести, Пауза, Повторить. Отключает воспроизведение/паузу при нажатии на плеер.
  • playbackRate — скорость воспроизведения.
  • poster — постер.
  • preloader — спиннер загрузки.
  • settings — кнопка настроек.
  • skipAd — кнопка пропуска рекламы.
  • startPositionConfirm — кнопка подтверждения начального времени воспроизведения.
  • startScreen — стартовый экран.
  • startScreenPlay — кнопка воспроизведения на стартовом экране.
  • subtitlesToggle — кнопка включения/выключения субтитров.
  • timeline — таймлайн. Отключает перемотку с клавиатуры или при нажатии на сенсорный экран.
  • timelinePreview — превью на таймлане.
  • time — текущее время воспроизведения.
  • title — название видео.
  • sound — кнопка отключения звука.
  • volumeSlider — ползунок громкости.

Если хотите скрыть несколько элементов интерфейса, передайте строку и укажите в ней значения через запятую. Например: hidden=startScreenPlay,play.

lang

Язык, на котором будет отображаться интерфейс плеера.

Может принимать значения
  • ru — русский.
  • en — английский.
  • be — белорусский.
  • id — индонезийский.
  • kk — казахский.
  • tr — турецкий.
  • tt — татарский.
  • uk — украинский.
  • uz — узбекский.

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

loop

Зацикливать воспроизведение видео:

  • false — видео не зациклено.
  • true — видео зациклено.

Значение по умолчанию — false.

mute

Выключать звук при загрузке плеера:

  • 0 — звук включен.
  • 1 — звук выключен.

Значение по умолчанию — 0.

play_on_visible

Останавливать воспроизведение видео при уходе из зоны видимости и начинать воспроизведение при нахождении в ней. Параметр влияет на показ как видеоконтента, так и рекламных роликов. Он может принимать значения:

  • false — видео воспроизводится при уходе из зоны видимости.
  • true — видео не воспроизводится при уходе из зоны видимости.
  • доля видимости плеера, достаточная для воспроизведения; значение параметра указывается в виде десятичной дроби, разделитель — точка.

Значение по умолчанию — false. При значении true доля видимости равна 0.5.

Примечание

При play_on_visible=true параметр autoplay игнорируется. Параметр работает только в браузерах, в которых можно определить точную видимость плеера.

preload

Предварительно загружать видео:

  • false — видео предварительно не загружается.
  • true — видео предварительно загружается.

Значение по умолчанию — false.

При autoplay=1 параметр preload игнорируется.

volume

Громкость звука в процентах при загрузке плеера.

Может принимать значения от 0 до 100 включительно.

Например, volume=50.

Значение параметра игнорируется, если mute=1.

В примере ниже видео будет запущено автоматически, но без звука:

<iframe 
  src="https://frontend.vh.yandex.ru/player/{video_content_id}?from=partner&autoplay=1&mute=1" 
  allow="autoplay; encrypted-media; screen-wake-lock" frameborder="0" allowfullscreen>
</iframe>
Написать в службу поддержки



Также вы можете перейти на сервис

Предыдущая
Требования к видео
Следующая
Статистика