Встраивание с помощью IFrame API

Этот вид встраивания предназначен для разработчиков.

Для использования IFrame Player API необходимо реализовать на веб-странице следующую функцию JavaScript:

onKinescopeIframeAPIReady(playerFactory) — API автоматически вызовет эту функцию, когда IFrame Player API будет загружено и готово к использованию. Функция должна быть объявлена до загрузки скрипта IFrame Player API. В качестве параметра передаётся объект для создания плеера.

Пример


<!doctype html>
<html>
  <body>
    <!-- 1. Плеер заменит этот <div> на <iframe>. -->
    <div id="player"></div>
 
    <!-- Чтобы применить к <iframe> свои стили или атрибуты, используйте <iframe> вместо <div>: -->
    <!-- <iframe id="player" class="my-class"></iframe> -->
 
    <script>
      // 2. Загрузка скрипта IFrame Player API.
      const tag = document.createElement('script');
      tag.src = 'https://player.kinescope.io/latest/iframe.player.js';
      document.head.appendChild(tag);
 
      // 3. Эта функция будет вызвана автоматически, когда скрипт API загрузится.
      function onKinescopeIframeAPIReady(playerFactory) {
        playerFactory
          .create('player', {
            url: 'https://kinescope.io/VIDEO_ID',
            size: { width: '100%', height: 400 },
          })
          .then((player) => {
            // 4. Плеер загрузил данные — устанавливаем громкость.
            player.once(player.Events.Loaded, (event) => {
              event.target.setVolume(0.5);
            });
 
            // 5. Воспроизведение началось — через 5 секунд ставим на паузу.
            player.on(player.Events.Playing, (event) => {
              setTimeout(() => {
                event.target.pause();
              }, 5000);
            });
          });
      }
    </script>
  </body>
</html>