Для использования IFrame Player API необходимо реализовать на веб-странице следующую функцию JavaScript:
onKinescopeIframeAPIReady(playerFactory: IframePlayerFactory) – API автоматически вызовет эту функцию, когда IFrame Player API будет загружено и готово к использованию. Эта функция должна быть объявлена до загрузки скрипта IFrame Player API. В качестве параметра в функцию передается объект для создания плеера.<!DOCTYPE html>
<html>
<body>
<!-- 1. Плеер заменит <div> на <iframe>. -->
<div id="player" class></div>
<!-- Чтобы применить к <iframe> свои стили и/или атрибуты используйте тег <iframe>: -->
<!-- <iframe id="player" class="some-class" someattr="some value"></iframe> -->
<script>
// 2. Этот код асинхронно загрузит IFrame Player API (скрипт IFrame Player API).
var tag = document.createElement('script');
tag.src = 'https://player.kinescope.io/{version}/iframe.player.js';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. Эта функция создаст <iframe> (и Kinescope Player).
// Она будет вызвана автоматически когда скрипт API будет загружен.
function onKinescopeIframeAPIReady(playerFactory) {
playerFactory
.create('player', {
url: 'https://kinescope.io/1111111',
size: { width: '50%', height: 400 },
})
.then(function (player) {
player
// 4. Этот обработчик будет вызван когда плеер загрузит необходимые данные для воспроизведения.
.once(player.Events.Ready, function (event) {
event.target.setVolume(0.5);
})
// 5. Этот обработчик будет вызван когда начнется воспроизведение.
// Плеер проиграет 5 сек. и затем должен остановиться.
.on(player.Events.Playing, function (event) {
setTimeout(function () {
event.target.pause();
}, 5000);
});
});
}
</script>
</body>
</html>
version - версия IFrame Player API и плеера в формате semver с преффиксом
v. Например,v2.18.17: https://player.kinescope.io/v2.18.17/iframe.player.js.
Самая последняя версия -latest: https://player.kinescope.io/latest/iframe.player.js