# Otimização


Se uma página tem muitos vídeos ou um player fica fora da área visível, adie o carregamento e limite a qualidade. A página carregará mais rápido e usará menos dados.

| Objetivo | Use |
| :--- | :--- |
| Não baixar o vídeo antes de clicar em Play | `preload=0` ou `behavior.preload: false` |
| Não carregar o iframe antes da rolagem | `loading="lazy"` |
| Exibir um pôster personalizado sobre o player | `no_poster=1` |
| Iniciar a reprodução quando o player entrar na área visível | `autoPlay: 'viewable'` |
| Reproduzir apenas enquanto o ponteiro estiver sobre o player | `autoPlay: 'hover'` |
| Definir ou limitar a qualidade do vídeo | `quality`, `VideoQuality` ou `maxAbrQuality` |

O guia de [incorporação simples com iframe](https://docs-br.kinescope.com/player-docs/embedding/simple-iframe-embed/) também descreve os parâmetros básicos de URL.

## Desativar o pré-carregamento do vídeo

O player e o pôster são carregados primeiro. Os dados do vídeo começam a carregar apenas quando a reprodução é iniciada.

Incorporação simples:

```html
<iframe src="https://kinescope.io/embed/VIDEO_ID?preload=0" ...></iframe>
```

IFrame API:

```js
playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  behavior: { preload: false },
})
```

## Carregar o iframe sob demanda

O navegador pode adiar o carregamento enquanto o `<iframe>` estiver fora da área visível. Consulte [Carregamento sob demanda](https://docs-br.kinescope.com/player-docs/embedding/simple-iframe-embed/#carregamento-sob-demanda) no guia de incorporação simples.

```html
<iframe loading="lazy" src="https://kinescope.io/embed/VIDEO_ID" ...></iframe>
```

## Desativar o pôster do player

Se você exibe seu próprio pôster, como uma `<img>` sobre o player, desative o pôster integrado. Isso evita que a imagem seja carregada duas vezes:

```html
<iframe src="https://kinescope.io/embed/VIDEO_ID?no_poster=1&preload=0" ...></iframe>
```

## Iniciar a reprodução quando estiver visível

O player inicia automaticamente quando entra na área visível. Isso é útil para vídeos abaixo da primeira dobra da página.

```js
playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  behavior: { autoPlay: 'viewable' },
})
```

## Iniciar a reprodução ao passar o ponteiro

O vídeo é reproduzido enquanto o ponteiro está sobre o player e pausado quando sai. Esse comportamento é interrompido após o primeiro clique no player.

```js
playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  behavior: { autoPlay: 'hover' },
})
```

## Qualidade do vídeo (VideoQuality) {#qualidade-do-video}

O player usa este tipo de qualidade:

```ts
type VideoQuality = 'auto' | number
```

- `'auto'` seleciona a qualidade com taxa de bits adaptativa (ABR) para a rede e o dispositivo
- `number` define a altura do quadro em pixels, normalmente `360`, `480`, `720`, `1080`, `1440` ou `2160`

### Usar um parâmetro de URL

```
https://kinescope.io/embed/VIDEO_ID?quality=720
```

Consulte o parâmetro `quality` em [Incorporação simples com iframe](https://docs-br.kinescope.com/player-docs/embedding/simple-iframe-embed/).

### Usar a IFrame API

```js
const qualities = await player.getVideoQualityList()
// ['auto', 360, 480, 720, 1080]

await player.setVideoQuality(720)

const current = await player.getVideoQuality()
// 720
```

Consulte [Controlar o player](https://docs-br.kinescope.com/player-docs/embedding/iframe-api-control-player/) para ver os detalhes dos métodos.

## Limitar a qualidade máxima de ABR

Por padrão, a ABR seleciona a melhor qualidade disponível. Defina um valor máximo para reduzir o uso de dados:

```js
playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  behavior: { maxAbrQuality: 720 },
})
```

## Próximos passos

- [Incorporação simples com iframe](https://docs-br.kinescope.com/player-docs/embedding/simple-iframe-embed/) — consulte todos os parâmetros de URL
- [Criar um player](https://docs-br.kinescope.com/player-docs/embedding/iframe-api-create-player/) — configure `behavior.preload`, `autoPlay` e outras opções
- [Solução de problemas](https://docs-br.kinescope.com/player-docs/troubleshooting/) — resolva problemas de reprodução automática e políticas do navegador