# Incorporação com a IFrame API


Use a IFrame Player API quando apenas um iframe não for suficiente. Você pode controlar a reprodução pelo seu código, escutar eventos e atualizar configurações durante a execução.

> **Информация:**

Se você não precisa de JavaScript, use uma [incorporação simples com iframe](https://docs-br.kinescope.com/player-docs/embedding/simple-iframe-embed/).



## Conecte a API

1. Declare `onKinescopeIframeAPIReady(playerFactory)` na página **antes** de carregar o script da API.
2. Carregue `https://player.kinescope.io/latest/iframe.player.js`.
3. Quando a API estiver pronta, o Kinescope chamará sua função e passará a [factory para criar um player](https://docs-br.kinescope.com/player-docs/embedding/iframe-api-create-player/).

Em vez de um callback, você pode usar o pacote [@kinescope/player-iframe-api-loader](https://docs-br.kinescope.com/player-docs/libraries/player-iframe-api-loader/). Ele retorna a factory por `async/await` e inclui tipos TypeScript.

## Exemplo

```html
<!doctype html>
<html>
  <body>
    <!-- O player substitui esta <div> por um <iframe>. -->
    <div id="player"></div>

    <!-- Para definir estilos ou atributos personalizados, use um <iframe> em vez de uma <div>: -->
    <!-- <iframe id="player" class="my-class"></iframe> -->

    <script>
      const tag = document.createElement('script');
      tag.src = 'https://player.kinescope.io/latest/iframe.player.js';
      document.head.appendChild(tag);

      function onKinescopeIframeAPIReady(playerFactory) {
        playerFactory
          .create('player', {
            url: 'https://kinescope.io/VIDEO_ID',
            size: { width: '100%', height: 400 },
          })
          .then((player) => {
            player.once(player.Events.Loaded, (event) => {
              event.target.setVolume(0.5);
            });

            player.on(player.Events.Playing, (event) => {
              setTimeout(() => {
                event.target.pause();
              }, 5000);
            });
          });
      }
    </script>
  </body>
</html>
```

## Seções da IFrame API

| Seção | Descrição |
| :--- | :--- |
| [Criação de um player](https://docs-br.kinescope.com/player-docs/embedding/iframe-api-create-player/) | Factory, `create()` e parâmetros de `CreateOptions` |
| [Controle do player](https://docs-br.kinescope.com/player-docs/embedding/iframe-api-control-player/) | Métodos e eventos de uma instância do player |
| [Conexão automática](https://docs-br.kinescope.com/player-docs/embedding/iframe-api-auto-connect/) | Conecte a API a um iframe existente |
| [player-iframe-api-loader](https://docs-br.kinescope.com/player-docs/libraries/player-iframe-api-loader/) | Loader da API para npm e tipos TypeScript |
| [Bibliotecas](https://docs-br.kinescope.com/player-docs/libraries/) | Wrappers para React, Vue, Angular e outros frameworks |

