Простое встраивание через <iframe>
Помимо простого встраивания через <iframe> с указанием URL-адреса видеоролика или плейлиста есть возможность добавить некоторые функциональные возможности в плеер, добавив параметры в конец URL-адреса в коде для встраивания. Параметры URL начинаются с вопросительного знака (?). Например:
<iframe
src="https://kinescope.io/embed/123456789?параметр=значение"
width="640"
height="360"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write;"
></iframe>
Атрибут
allow
позволяет плееру использовать автозапуск, полноэкранный режим, картинку в картинке, проигрывать зашифрованное видео и т.д.
Чтобы указать несколько параметров необходимо между ними вставить символ
&
, например:https://kinescope.io/embed/123456789?autoplay=1&loop=1
Если используется атрибут
sandbox
(не рекомендуется), то для него необходимо указать значенияallow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox allow-presentation
.
Поддерживаемые параметры:
Параметр | Поддерживаемые значения | Описание |
---|---|---|
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 |
Время с которого начинается проигрывание видео (сек). |
quality |
VideoQuality |
Выбрать указанное качество видео. |
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 |
Показывать ли элементы управления плеером. |
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
.
Например:https://kinescope.io/embed/123456789?autoplay=true
эквивалентноhttps://kinescope.io/embed/123456789?autoplay=1
.
Для параметров, которые принимают значение
true
, отсутствие значения трактуется какtrue
.
Например:https://kinescope.io/embed/123456789?autoplay
эквивалентноhttps://kinescope.io/embed/123456789?autoplay=true
.
Отложенная загрузка
Пока iframe находится вне зоны видимости, где-то глубоко внизу страницы, можно отложить его загрузку, чтобы сократить нагрузку на страницу и увеличить быстродействие.
Для отложенной загрузки iframe укажите атрибут loading="lazy"
:
<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%;
}
</style>
<div class="kin-player-embed-container">
<iframe
src="https://kinescope.io/embed/123456789"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write;"
></iframe>
</div>
Фиксированный размер видео
<iframe
src="https://kinescope.io/embed/123456789"
width="640"
height="360"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write;"
></iframe>