<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>

См. так же

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