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

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

Для использования 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/latest/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>