Встраивание с помощью IFrame API
IFrame Player API нужен, когда мало вставить iframe: вы управляете воспроизведением из своего кода, слушаете события и меняете настройки на лету.
Если JavaScript не нужен — используйте простое встраивание через iframe
.
Как подключить
- Объявите на странице функцию
onKinescopeIframeAPIReady(playerFactory)до загрузки скрипта API. - Подключите скрипт
https://player.kinescope.io/latest/iframe.player.js. - Когда API будет готово, Kinescope вызовет вашу функцию и передаст фабрику для создания плеера .
Вместо колбэка можно использовать пакет @kinescope/player-iframe-api-loader
— он возвращает фабрику через async/await и содержит TypeScript-типы.
Пример
<!doctype html>
<html>
<body>
<!-- Плеер заменит этот <div> на <iframe>. -->
<div id="player"></div>
<!-- Чтобы задать свои стили или атрибуты, используйте <iframe> вместо <div>: -->
<!-- <iframe id="player" class="my-class"></iframe> -->
<script>
const tag = document.createElement('script');
tag.src = 'https://player.kinescope.io/latest/iframe.player.js';
document.head.appendChild(tag);
function onKinescopeIframeAPIReady(playerFactory) {
playerFactory
.create('player', {
url: 'https://kinescope.io/VIDEO_ID',
size: { width: '100%', height: 400 },
})
.then((player) => {
player.once(player.Events.Loaded, (event) => {
event.target.setVolume(0.5);
});
player.on(player.Events.Playing, (event) => {
setTimeout(() => {
event.target.pause();
}, 5000);
});
});
}
</script>
</body>
</html>
Разделы IFrame API
| Раздел | О чём |
|---|---|
| Создание плеера | Фабрика, create(), параметры CreateOptions |
| Управление плеером | Методы и события экземпляра плеера |
| Автоподключение | Подключить API к уже вставленному iframe |
| player-iframe-api-loader | npm-загрузчик API и TypeScript-типы |
| Библиотеки | React, Vue, Angular и другие обёртки |