Простое встраивание через iframe
Самый простой способ добавить плеер — вставить на страницу тег <iframe> со ссылкой на видео или плейлист. Код можно скопировать из панели управления Kinescope или собрать вручную.
Базовый код
<iframe
src="https://kinescope.io/embed/VIDEO_ID"
width="640"
height="360"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
style="border: none;"
></iframe>
Замените VIDEO_ID на идентификатор видео или плейлиста.
Атрибут
allow обязателен: без него могут не работать автозапуск, полноэкранный режим, Picture-in-Picture и DRM.Атрибут sandbox лучше не использовать. Если он всё же нужен, укажите:
allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox allow-presentation
Параметры URL
Поведение плеера настраивается параметрами в конце URL. Они начинаются с ?, несколько значений разделяются &:
https://kinescope.io/embed/VIDEO_ID?autoplay=1&loop=1
<iframe
src="https://kinescope.io/embed/VIDEO_ID?parameter=value"
width="640"
height="360"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
style="border: none;"
></iframe>
Поддерживаемые параметры
| Параметр | Значения | Описание |
|---|---|---|
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 | number | Время в секундах, с которого начинается воспроизведение (обрезает начало манифеста). |
duration | number | Продолжительность фрагмента в секундах. Вместе с seek позволяет показать только часть видео. |
quality | VideoQuality | Качество видео: auto или высота в пикселях (720, 1080…). Подробнее — в Оптимизации. |
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 | Показывать ли уведомления в плеере (проблемы с интернетом, ошибки, Chromecast и т.д.). @experimental |
watermark | string | Текст водяного знака. Функция включается в панели управления; без неё параметр игнорируется. |
dnt | true / false / 1 / 0 | Отключить отслеживание действий пользователя и отправку метрик. |
drmauthtoken | string | Пользовательский токен для авторизации при запросе лицензии. См. DRM-шифрование. |
adtagurl | string | Ссылка на тег рекламы. См. Реклама. |
externalid | string | Пользовательский идентификатор для отправки метрик. |
Для параметров
true/false можно писать 1/0. Например, ?autoplay=true и ?autoplay=1 эквивалентны. Если параметр указан без значения (?autoplay), это считается true.Параметры
seek и duration не работают с видео под DRM. Они применимы к ссылкам на видео и манифестам HLS.Пример фрагмента — с 60-й секунды, длительностью 30 секунд:
<iframe
src="https://kinescope.io/embed/VIDEO_ID?seek=60&duration=30"
width="640"
height="360"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
style="border: none;"
></iframe>
Отложенная загрузка
Пока <iframe> находится вне зоны видимости (например, внизу страницы), можно отложить его загрузку — так страница открывается быстрее:
<iframe loading="lazy" ...></iframe>
Подробнее — в разделе Оптимизация .
Примеры встраивания
Адаптивный размер плеера (responsive)
Плеер подстраивается под ширину контейнера. Поместите код в свой контейнер и при необходимости подправьте стили.
<style>
.kin-player-embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
max-width: 100%;
overflow: hidden;
}
.kin-player-embed-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
<div class="kin-player-embed-container">
<iframe
src="https://kinescope.io/embed/VIDEO_ID"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
></iframe>
</div>
Фиксированный размер видео
<iframe
src="https://kinescope.io/embed/VIDEO_ID"
width="640"
height="360"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
style="border: none;"
></iframe>
Что дальше?
- Оптимизация — автозапуск по видимости, ограничение качества
- IFrame API — управление плеером из JavaScript
- Встраивание в панели управления
— коды из UI, LLM-friendly, шаблоны (
player_id)