Автоподключение встроенного видео к IFrame API
Обычно плеер создают через create()
. Если iframe уже на странице, API можно «подцепить» к нему автоматически.
Для этого нужно:
- Добавить URL-параметр
?autoк скрипту IFrame Player API. - Добавить URL-параметр
?enableIframeApiкsrcкаждого<iframe>с видео.
Обработчик
onKinescopeIframeAPIReady вызывается при создании каждого плеера. Если на странице несколько видео с enableIframeApi, подпишитесь на playerFactory.Events.Created — так удобнее обработать все экземпляры.Пример
<!doctype html>
<html>
<head>
<!-- Скрипт IFrame Player API с параметром ?auto:
все подходящие <iframe> на странице подключатся к API.
defer — скрипт выполнится после парсинга HTML. -->
<script defer src="https://player.kinescope.io/latest/iframe.player.js?auto"></script>
<script>
function onKinescopeIframeAPIReady(playerFactory) {
playerFactory.on(playerFactory.Events.Created, ({ data: player }) => {
player.setVolume(0.5)
})
}
</script>
</head>
<body>
<!-- enableIframeApi разрешает подключение к IFrame API -->
<iframe
src="https://kinescope.io/embed/VIDEO_ID?enableIframeApi"
allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
style="border: none;"
></iframe>
</body>
</html>
Что дальше?
- Управление плеером — методы и события после подключения
- Простое встраивание — iframe и URL-параметры
- Создание плеера
— обычный путь через
create()