Встраиваемые виджеты
Рядом со встроенным плеером можно разместить два виджета — список плейлиста и список глав текущего видео. Раньше такой список был только на публичной странице Kinescope; теперь он встраивается на ваш сайт отдельным блоком.
| Виджет | Для чего | Где доступен |
|---|---|---|
| Плейлист | Список роликов с превью, названием и длительностью. Клик — переключение ролика в плеере | Плейлист из двух и более роликов |
| Главы | Список глав с таймкодами. Клик — переход к главе | Одиночное видео, у которого есть главы |
Виджеты не пересекаются: у плейлиста доступен только виджет плейлиста, у видео — только виджет глав.
Где взять код
- Откройте настройки видео или плейлиста в панели управления и нажмите «Встроить».
- Перейдите на вкладку «Главы» (у видео) или «Плейлист» (у плейлиста).
- Выберите тему виджета:
Авто,СветлаяилиТёмная. - Выберите тип кода: адаптивный — виджет занимает блок, в который вставлен, или фиксированный — с шириной и высотой в пикселях (по умолчанию 400 × 600).
- Скопируйте скрипт — он вставляется на страницу один раз, независимо от числа виджетов.
- Нажмите «Скопировать код» — в буфер попадёт блок виджета.
У плейлиста то же окно открывается на вкладке «Плейлист»:
Вкладки появляются не всегда:
- «Главы» — только если у видео включены главы. Как их добавить — в статье «Взаимодействие с файлами: субтитры, главы и др.».
- «Плейлист» — только если в плейлисте больше одного ролика.
Код вставки
Виджет состоит из двух частей: скрипт-загрузчик и блок-контейнер.
Скрипт — один раз на страницу, обычно перед закрывающим </body>:
<script src="https://widgets.kinescope.io/latest/loader.js"></script>
Контейнер — в том месте, где должен появиться виджет:
<!-- Виджет плейлиста -->
<div id="kinescope-widget-playlist" data-id="PLAYLIST_ID"></div>
<!-- Виджет глав -->
<div id="kinescope-widget-chapters" data-id="VIDEO_ID"></div>
PLAYLIST_ID и VIDEO_ID — идентификаторы плейлиста и видео из панели управления. Подставлять их вручную не нужно: в скопированном коде они уже есть.
Загрузчик подставляет в контейнер iframe с виджетом и сам связывает его с плеером на странице.
Размер виджета
Виджет занимает блок, в который вставлен: ширина — по ширине блока, высота — по его высоте. Поэтому высоту задавайте в своей вёрстке — через CSS блока или атрибутом data-height.
Чтобы список встал ровно в высоту плеера, поставьте плеер и виджет в одну строку сетки и укажите виджету data-height="100%".
Пример: плеер и виджет глав рядом
<!DOCTYPE html>
<html>
<head>
<style>
.layout { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 900px) {
.layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
.player { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.widget { min-height: 280px; }
</style>
</head>
<body>
<h1>Урок 1</h1>
<div class="layout">
<!-- Плеер -->
<div class="player">
<iframe
src="https://kinescope.io/embed/VIDEO_ID"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
frameborder="0"
allowfullscreen
></iframe>
</div>
<!-- Виджет глав -->
<div id="kinescope-widget-chapters" class="widget" data-id="VIDEO_ID" data-height="100%"></div>
</div>
<script src="https://widgets.kinescope.io/latest/loader.js"></script>
</body>
</html>
Так виджет глав выглядит на странице рядом с плеером:
Виджет плейлиста встраивается так же — с плеером плейлиста (https://kinescope.io/embed/pl/PLAYLIST_ID) и контейнером kinescope-widget-playlist. Подробнее о плейлистах в плеере — в статье «Плейлисты».
Параметры
Все параметры задаются атрибутами контейнера. В панели управления они подставляются автоматически — по выбранной теме и типу кода.
| Атрибут | Значения | Описание |
|---|---|---|
data-id | ID видео или плейлиста | Обязательный. Что показывать в виджете |
data-theme | light, dark | Тема виджета. Для темы Авто атрибут не добавляется — виджет следует системной теме браузера зрителя |
data-width | 100%, размер в px | Ширина виджета. Без атрибута — по ширине блока-контейнера |
data-height | 100%, размер в px | Высота виджета. Без атрибута — по высоте блока-контейнера |
Тема виджета не связана с темой плеера — это независимая настройка. Интерфейс виджета (заголовки, подсказки) отображается на языке браузера зрителя.
Синхронизация с плеером
Виджет находит плеер Kinescope на странице сам — дополнительный код не нужен. Работают три схемы: два iframe рядом, плеер через IFrame API плюс виджет и обычный embed-плеер плюс виджет.
Что происходит дальше:
- переключение ролика в плеере подсвечивает активную строку в виджете плейлиста;
- воспроизведение подсвечивает текущую главу в виджете глав;
- клик по ролику переключает плеер, клик по главе перематывает видео к её началу;
- при пересоздании плеера виджет переподключается автоматически.
Если содержимое изменилось — добавили ролик в плейлист или главу в видео, — виджет на сайте подхватит это сам. Перевставлять код не нужно.
На мобильных
На узких экранах виджет сворачивается: список открывается по тапу и выезжает снизу поверх страницы. Плеер при этом остаётся на месте. Отдельного кода для мобильной версии не требуется.
Пустые состояния
| Что видит зритель | Когда |
|---|---|
| «Главы отсутствуют» | Главы у видео удалили или скрыли после того, как виджет встроили |
| «Нет данных» | В плейлисте остался один ролик |
| «Встраивание недоступно» | Видео или плейлист удалены либо недоступны для встраивания |
Виджет при этом остаётся на странице и не ломает вёрстку.
Ограничения
- Виджет не работает без плеера Kinescope на той же странице.
- Редактировать плейлист или главы из виджета нельзя — это делается в панели управления.
- Оформление, кроме темы и размера, не настраивается: шрифты, цвета и превью изменить нельзя.
- Список внутри виджета прокручивается: если блок ниже, чем список, видна часть роликов или глав — активная строка подсвечена.
- У плейлиста нет виджета глав, у одиночного видео — виджета плейлиста.
Что дальше?
- Встраивание — код вставки плеера, размеры и параметры
- Плейлисты — как собрать плейлист в каталоге
- Взаимодействие с файлами: субтитры, главы и др. — как добавить главы к видео
- Кастомизация плеера — внешний вид плеера под ваш бренд
Остались вопросы? Напишите в чат поддержки — специалисты помогут!