# Kinescope Web Components


Os Web Components permitem incorporar o player com uma tag HTML. Você não precisa chamar `create()` nem usar callbacks da IFrame API. O elemento `<kinescope-iframe-player>` está disponível atualmente.

> **Внимание:**

Este recurso é experimental, então sua API pode mudar. Acompanhe o [histórico de alterações do player](https://docs-br.kinescope.com/player-docs/changelog/).



Para saber mais sobre a tecnologia, consulte [MDN: Web Components](https://developer.mozilla.org/pt-BR/docs/Web/API/Web_components).

## Conecte o componente

Carregue este script antes de usar o componente:

`https://player.kinescope.io/latest/elements/kinescope-iframe-player.js`

Os atributos do elemento correspondem aos parâmetros de uma [incorporação simples com iframe](https://docs-br.kinescope.com/player-docs/embedding/simple-iframe-embed/).

| Atributo | Obrigatório | Descrição |
| :--- | :--- | :--- |
| `url` | sim | URL do vídeo |
| `id` | para configuração | Obrigatório quando você define opções por `window.KinescopeIframePlayerConfig` |

O player é recriado automaticamente quando `id`, `url` ou `externalid` muda.

## Exemplo

```html
<script src="https://player.kinescope.io/latest/elements/kinescope-iframe-player.js"></script>

<script>
  window.KinescopeIframePlayerConfig = {
    ...window.KinescopeIframePlayerConfig,
    // ID do elemento que recebe estas configurações
    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>
```

## Configure KinescopeIframePlayerConfig

`window.KinescopeIframePlayerConfig` associa os IDs dos elementos às suas configurações. Elas correspondem a [CreateOptions](https://docs-br.kinescope.com/player-docs/embedding/iframe-api-create-player/#create-options), exceto pelos campos `url`, `size` e `settings`.

```ts
window.KinescopeIframePlayerConfig = {
  myplayer: {
    behavior: { /* … */ },
    ui: { /* … */ },
    theme: { /* … */ },
  },
}
```

## Métodos

| Método | Retorno | Descrição |
| :--- | :--- | :--- |
| <a id="getInstance"></a>`getInstance()` | `IframePlayerApi \| undefined` | O [objeto de controle do player](https://docs-br.kinescope.com/player-docs/embedding/iframe-api-control-player/) ou `undefined` se o player ainda não tiver sido criado |
| <a id="waitInstance"></a>`waitInstance()` | `Promise<IframePlayerApi>` | Aguarda o objeto de controle enquanto o player é criado |

## Eventos

Assine eventos com os métodos padrão `addEventListener` e `removeEventListener`. A enumeração de eventos está disponível na propriedade `Events` do elemento. A maioria corresponde aos [eventos da IFrame API](https://docs-br.kinescope.com/player-docs/embedding/iframe-api-control-player/#event-data).

O componente também fornece este evento:

| Evento | Descrição |
| :--- | :--- |
| `Events.Created` | O player acabou de ser criado. Assine logo após declarar o elemento |

Os dados do evento estão disponíveis em `event.detail`.

### Exemplo da API

```html
<kinescope-iframe-player
  id="myplayer"
  url="https://kinescope.io/VIDEO_ID"
></kinescope-iframe-player>
<script>
  const playerEl = document.getElementById('myplayer')

  // Opção 1: evento de criação
  playerEl.addEventListener(playerEl.Events.Created, () => {
    const player = playerEl.getInstance()
    player.setVolume(0.5)
  })

  // Opção 2: aguardar com uma Promise
  ;(async () => {
    const player = await playerEl.waitInstance()
    player.on(player.Events.Playing, () => {
      console.log('reprodução iniciada')
    })
  })()
</script>
```

## Próximos passos

- [IFrame API](https://docs-br.kinescope.com/player-docs/embedding/iframe-api/) — controle completo por JavaScript
- [Incorporação simples com iframe](https://docs-br.kinescope.com/player-docs/embedding/simple-iframe-embed/) — parâmetros de URL
- [Bibliotecas](https://docs-br.kinescope.com/player-docs/libraries/) — React, Vue e Angular