<kinescope-iframe-player>

Перед использованием элемента необходимо загрузить скрипт: https://player.kinescope.io/latest/elements/kinescope-iframe-player.js .

Элемент принимает аттрибуты имена и значения которых совпадают с параметрами простого встраивания, см. пример ниже.

Основной и обязательный атрибут url - урл на видео. Атрибут id необходим если вы указываете настройки через window.KinescopeIframePlayerConfig, см. пример ниже.

Пример


<!-- Скрипт пользовательского элемента. -->
<script src="https://player.kinescope.io/latest/elements/kinescope-iframe-player.js"></script>
 
<!-- Настройки для плееров. -->
<script>
  window.KinescopeIframePlayerConfig = {
    ...window.KinescopeIframePlayerConfig,
    // ID элемента к которому применяются настройки.
    myplayer: {
      ui: { playbackRateButton: true },
    },
  };
</script>
 
<!-- Пользовательский элемент. -->
<kinescope-iframe-player
  id="myplayer"
  url="https://kinescope.io/123456789"
  externalid="12345"
  autoplay
  style="background-color: green"
></kinescope-iframe-player>

Объект window.KinescopeIframePlayerConfig имеет структуру состоящую из ID элементов и настроек плеера из IFrame API, за исключением полей url, size, settings. Например:


window.KinescopeIframePlayerConfig = {
  // `myplayer` - ID элемента к которому применяются настройки.
  myplayer: {
    behavior: {...},
    ui: {...},
    theme: {...},
  },
};

При изменении следующих атрибутов плеер будет автоматически пересоздан:

id
url
externalid

Методы

getInstance(): IframePlayerApi | undefined

Объект управления плеером. undefined - плеер еще не создан.
waitInstance(): Promise<IframePlayerApi>

Ожидание объекта управления плеером в случае когда плеер еще не создан - находится в процессе создания.

События

Подписаться на события и отписаться можно стандартным способом используя методы: addEventListener, removeEventListener.

Объект перечисления событий элемента содержится в свойстве Events.

Описание событий смотрите в управлении плеером.

Events.Created - дополнительное событие, которое происходит сразу после создания плеера. Подписаться на него нужно сразу после объявления элемента.

Данные события содержатся в объекте события в свойстве detail.

Пример:


<kinescope-iframe-player
  id="myplayer"
  url="https://kinescope.io/123456789"
></kinescope-iframe-player>
<script>
  const playerEl = document.getElementById('myplayer');
  playerEl.addEventListener(playerEl.Events.Created, (event) => {
    // Теперь `getInstance()` должен возвращать объект плеера.
  });
  (async () => {
    // При создании плеера промис завершится и вернет объект плеера.
    const player = await playerEl.waitInstance();
    // ...
  })();
</script>