Встраивание
Встраивание (embedding) — это удобный способ разместить медиафайлы на сайте. С помощью Kinescope легко интегрировать плеер с видео с помощью специальных кодов вставки.
Кому подходит эта статья
- Владельцам сайтов — нужно встроить видео на страницы
- Разработчикам — требуется интегрировать плеер в веб-приложения
- Контент-менеджерам — нужно добавить видео в статьи или страницы
- Владельцам контента — требуется защитить видео от несанкционированного копирования
Предварительные требования
Перед встраиванием плеера убедитесь, что:
- Видео загружено и обработано — файл должен быть доступен в каталоге Kinescope
- Настроены права доступа — видео должно быть доступно для встраивания (настройки конфиденциальности)
- Домен добавлен в список разрешённых — если включено ограничение по доменам, ваш сайт должен быть в списке
Использование кода вставки
Код вставки — это фрагмент кода, который используется для добавления плеера с медиафайлом на веб-страницу.
Существует два типа кодов вставки: адаптивный и фиксированный. Адаптивный код автоматически подстраивает размер плеера под размер экрана пользователя и корректно отображается на мобильных устройствах. Фиксированный код сохраняет заданные размеры плеера на всех устройствах.
Где найти код?
- Откройте настройки видео и нажмите «Встроить».
- Выберите адаптивный или фиксированный код вставки.
Код можно также скопировать в каталоге:
- Наведите на строку с нужным видео и кликните на меню (⁝) → «Копировать ссылку» → «Скопировать код для встраивания». В этом случае будет скопирован фиксированный код вставки.
Настройка размеров плеера
- Фиксированный код. Вы можете скопировать код по умолчанию или задать свой размер плеера, указав его ширину и высоту в пикселях, прямо в окне с кодом встраивания. При этом вы можете выбрать, сохранять соотношение сторон или нет (по умолчанию включено).
- Адаптивный код. В окне с кодом измените соотношение сторон для оптимального отображения при любом разрешении экрана устройства.
Пример использования кода
Встройте код вставки в HTML-код страницы, на которой вы планируете разместить плеер Kinescope.
Все сайты разные, поэтому единого способа встроить плеер не существует. Общее правило: встраивание кода осуществляется в контейнере или точно в том месте страницы, где должен отображаться плеер.
Пример адаптивного кода:
<!DOCTYPE html>
<html>
<body>
<h1>Мой курс</h1>
<p>Первый урок</p>
<!-- Начало кода вставки -->
<div style="position: relative; padding-top: 56.25%; width: 100%">
<iframe src="https://kinescope.io/embed/202589431"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
frameborder="0"
allowfullscreen
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></iframe></div>
<!-- Окончание кода вставки -->
</body>
</html>
Пример вставки адаптивного плеера:
По умолчанию плеер адаптируется под ширину контейнера. Если плеер не подходит по размеру, можно изменить размеры через CSS стили контейнера div или самого iframe.
Важно: Атрибут allowfullscreen — это булевый атрибут, который разрешает полноэкранный режим. Он не имеет параметров width и height. Размеры плеера задаются отдельно:
- Для адаптивного кода: через CSS стили контейнера (
padding-top,width) иiframe(width,heightв стилях) - Для фиксированного кода: через атрибуты
widthиheightсамогоiframe
Пример изменения размеров адаптивного плеера через CSS:
<div style="position: relative; padding-top: 56.25%; width: 80%">
<iframe src="https://kinescope.io/embed/202589431"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
frameborder="0"
allowfullscreen
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"></iframe>
</div>
Фиксированный код
Встраивание фиксированного кода вставки аналогично адаптивному. Единственное отличие в том, что в коде нет тега div, задающего адаптивные характеристики.
<!DOCTYPE html>
<html>
<body>
<h1>Мой курс</h1>
<p>Первый урок</p>
<!-- Начало кода вставки -->
<iframe src="https://kinescope.io/embed/202589431"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
frameborder="0"
allowfullscreen
width="560"
height="315">
</iframe>
<!-- Окончание кода вставки -->
</body>
</html>
Пример вставки плеера с фиксированным размером:
Готово!
Теперь плеер Kinescope встроен на вашу страницу.
Параметры встраивания
Воспроизведение фрагментов видео
Параметры seek и duration позволяют воспроизводить только часть видео:
seek— время в секундах, с которого начинается воспроизведение (обрезает начало манифеста)duration— продолжительность фрагмента в секундах
Ограничения:
- Параметры не работают с видео, защищёнными DRM-шифрованием
- Параметры работают только со ссылками на видео и манифестами HLS
- Для встраивания через iframe используйте параметры в URL
srciframe
Примеры использования:
Полное видео (4 мин 18 секунд):
Видео с начала 1 минуты (пропускаем первые 60 секунд):
Фрагмент видео (с 1 минуты, длительностью 30 секунд):
Для прямого использования манифестов HLS:
https://kinescope.io/203613411/master.m3u8?seek=60&duration=30
Для встраивания через iframe:
<iframe src="https://kinescope.io/embed/203613411?seek=60&duration=30"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
frameborder="0"
allowfullscreen></iframe>
Использование разных шаблонов плеера
Параметр player_id позволяет применять разные шаблоны оформления к одному и тому же видео без создания копий контента.
Ограничения:
- Параметр
player_idработает только со ссылками на видео (не с iframe) - Для встраивания через iframe настраивайте шаблон плеера в коде вставки или используйте IFrame API
Как использовать:
Скопируйте ID шаблона плеера:
- Перейдите в раздел «Плееры» в панели управления
- Раскройте контекстное меню нужного шаблона
- Скопируйте его ID — уникальный идентификатор формата
1213d24d-4624-4764-bf40-0baaf743377d
Добавьте параметр к ссылке на видео:
- Формат:
https://kinescope.io/[ID_ВИДЕО]?player_id=[ID_ПЛЕЕРА] - Пример:
https://kinescope.io/9cdAfqbbPcwu9GJwyxZ6jA?player_id=1213d24d-4624-4764-bf40-0baaf743377d
- Формат:
player_id обновятся без изменения ссылок.Настройка призывов к действию (CTA) через шаблоны плеера
Call To Action (CTA) позволяет показывать призывы к действию во время воспроизведения видео. Это полезно для рекламы, подписок, регистраций или других целей.
Как это работает: При активации CTA проигрывание останавливается и показывается экран поверх плеера с призывом к действию. При нажатии пользователем на кнопку действия срабатывает событие, которое можно обработать программно.
Настройка CTA через шаблоны плеера:
- Перейдите в раздел «Плееры» в панели управления
- Выберите или создайте шаблон плеера
- В разделе «Основные настройки» → «Поведение по окончании видео» выберите «Призыв к действию (Call to action, CTA)»
- Укажите заголовок, описание и ссылку для кнопки действия
- Сохраните изменения
Для более гибкой настройки CTA (показ в определённые моменты воспроизведения, при паузе, программное управление) используйте IFrame Player API. Подробнее о всех возможностях CTA см. в полной документации.
Параметры URL для настройки плеера
Помимо параметров seek, duration и player_id, вы можете использовать дополнительные параметры URL для настройки поведения плеера. Параметры добавляются в конец URL в атрибуте src iframe и начинаются с вопросительного знака (?). Для указания нескольких параметров используйте символ &.
Пример:
<iframe src="https://kinescope.io/embed/123456789?autoplay=1&muted=1&loop=1"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
frameborder="0"
allowfullscreen></iframe>
allow обязателен для полноценной работы плеера. Он позволяет плееру использовать автозапуск, полноэкранный режим, картинку в картинке, проигрывать зашифрованное видео и т.д.Поддерживаемые параметры:
| Параметр | Поддерживаемые значения | Описание |
|---|---|---|
autofocus | true/false или 1/0 | Передать фокус плееру. |
autoplay | true/false или 1/0 | Запускать ли ролик автоматически после загрузки плеера. Если не удалось начать воспроизведение со звуком, то плеер попытается начать воспроизведение с выключенным звуком. |
autopause | true/false или 1/0 | Ставить на паузу, если другой плеер на странице начал проигрывание. |
muted | true/false или 1/0 | Выключить звук. |
loop | true/false или 1/0 | Зацикленное видео. |
playsinline | true/false или 1/0 | Воспроизводить видео на мобильных устройствах не переходя автоматически в полноэкранный режим. |
preload | true/false или 1/0 | Предзагрузка видео. false — не осуществлять предзагрузку видео (только постер, экономия ресурсов страницы). true — предварительно загружаются необходимые данные видео. |
background | true/false или 1/0 | Отключает все элементы управления, устанавливает autoplay, muted, loop в true. |
t | number | Время в секундах, с которого начинается проигрывание видео (аналог seek). |
quality | auto, 240p, 360p, 480p, 720p, 1080p, 1440p, 2160p | Выбрать указанное качество видео. |
audiotrack | string | Включить аудио дорожку с указанным языком. @experimental |
texttrack | true/false или 1/0 или string | Включить субтитры с указанным языком. true — автовыбор в следующем порядке: на языке браузера, на языке плеера, первый в списке. string — включать дорожку с указанным языком. |
transparent | true/false или 1/0 | Прозрачный фон плеера. |
title | true/false или 1/0 | Показывать ли заголовок, подзаголовок. |
controls | true/false или 1/0 | Показывать ли элементы управления плеером. |
no_poster | 1/0 | Не показывать постер. |
keyboard | true/false или 1/0 | Управление плеером с клавиатуры. |
speedbtn | true/false или 1/0 | Показывать ли кнопку выбора скорости воспроизведения. |
notifications | true/false или 1/0 | Показывать ли уведомления в плеере (проблемы с интернетом, ошибки, хромкаст-подключение и т.д.). @experimental |
watermark | string | Текст водяного знака. Функциональность водяного знака включается в панели управления. Без включения функциональности параметр игнорируется. |
dnt | true/false или 1/0 | Отключить отслеживание действий пользователя, отправку метрик и т.п. |
drmauthtoken | string | Пользовательский токен для авторизации при запросе лицензии. |
adtagurl | string | Ссылка на тег рекламы. |
externalid | string | Какой-либо пользовательский идентификатор. Используется для отправки метрик. |
Для параметров, которые принимают значения true/false, эквивалентны значения 1/0. Например: ?autoplay=true эквивалентно ?autoplay=1.
Для параметров, которые принимают значение true, отсутствие значения трактуется как true. Например: ?autoplay эквивалентно ?autoplay=true.
Типы ссылок и их использование
Ссылка на видео
Прямая ссылка вида https://kinescope.io/[ID_ВИДЕО] открывает видео в отдельной странице плеера Kinescope. Поддерживает параметры seek, duration, player_id.
Использование: для публикации в социальных сетях, мессенджерах, email-рассылках.
Код встраивания (iframe)
Код для встраивания видео на ваш сайт. Поддерживает параметры seek и duration через URL в атрибуте src.
Использование: для размещения видео на веб-сайтах, в блогах, LMS платформах.
Манифест HLS
Прямая ссылка на манифест HLS (master.m3u8) для использования в собственных плеерах или мобильных приложениях.
Использование: для интеграции с собственными решениями, мобильными приложениями, продвинутыми сценариями воспроизведения.
Оптимизация загрузки
Чтобы ускорить загрузку страницы и сэкономить трафик, вы можете оптимизировать загрузку плеера. Это особенно полезно, если на странице несколько плееров или они находятся внизу страницы.
Отключение предзагрузки видео
По умолчанию плеер предзагружает данные видео. Чтобы отключить предзагрузку и загружать только постер, используйте параметр preload=false:
<iframe src="https://kinescope.io/embed/123456789?preload=false"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
frameborder="0"
allowfullscreen></iframe>
В этом случае загрузится сам плеер (как и постер), но данные видео не будут загружаться до начала воспроизведения. Это экономит трафик, если пользователь не собирается смотреть видео сразу.
Отложенная загрузка iframe
Если iframe находится вне зоны видимости (например, внизу страницы), можно отложить его загрузку до момента, когда пользователь прокрутит страницу до плеера. Для этого используйте атрибут loading="lazy":
<iframe src="https://kinescope.io/embed/123456789"
loading="lazy"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
frameborder="0"
allowfullscreen></iframe>
Отключение постера
Если вы используете свой постер или не хотите показывать постер плеера, используйте параметр no_poster=1:
<iframe src="https://kinescope.io/embed/123456789?no_poster=1"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
frameborder="0"
allowfullscreen></iframe>
Это уменьшит размер загружаемых данных.
Ограничение качества видео
Вы можете ограничить максимальное качество видео при автоматическом определении подходящего качества (ABR). Это помогает экономить трафик на мобильных устройствах:
<iframe src="https://kinescope.io/embed/123456789?quality=720p"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media;"
frameborder="0"
allowfullscreen></iframe>
Доступные значения: auto, 240p, 360p, 480p, 720p, 1080p, 1440p, 2160p.
Troubleshooting
Если у вас возникли проблемы с плеером, ознакомьтесь с разделом «Решение проблем», где собраны типичные ситуации и способы их решения.
Для базовых проблем с встраиванием проверьте:
- Видео не воспроизводится — проверьте настройки конфиденциальности и доступность для встраивания
- Плеер не отображается — проверьте код встраивания и консоль браузера на наличие ошибок
- Параметры не работают — убедитесь, что параметры правильно переданы в URL
- Проблемы с размерами — проверьте CSS стили контейнера и iframe
Что дальше?
После настройки встраивания рекомендуем:
- Настройки конфиденциальности — управление доступом к видео и настройками встраивания
- Кастомизация плеера — настройка внешнего вида и поведения под ваш бренд
- IFrame Player API — программное управление плеером через IFrame Player API, включая настройку CTA
- Защита контента — добавление водяных знаков или DRM-шифрования
- Реклама — интеграция рекламных тегов в плеер
- Решение проблем — типичные проблемы и способы их решения
Остались вопросы? Напишите в чат поддержки — специалисты помогут!