# Оптимизация


Если на странице много видео или плеер ниже первого экрана, имеет смысл отложить загрузку и ограничить качество — страница откроется быстрее, трафика уйдёт меньше.

| Задача | Что использовать |
| :--- | :--- |
| Не качать видео до Play | `preload=0` / `behavior.preload: false` |
| Не грузить iframe до скролла | `loading="lazy"` |
| Свой постер поверх плеера | `no_poster=1` |
| Автозапуск при появлении в viewport | `autoPlay: 'viewable'` |
| Play только при наведении | `autoPlay: 'hover'` |
| Задать или ограничить качество | `quality` / `VideoQuality` / `maxAbrQuality` |

Базовые URL-параметры также описаны в [простом встраивании](https://docs.kinescope.ru/dokumentaciya-pleera/vstraivanie/prostoe-vstraivanie-iframe/).

## Отключение предзагрузки видео

Плеер и постер загрузятся, данные видео — только после старта воспроизведения.

Простое встраивание:

```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 },
})
```

## Отложенная загрузка iframe

Пока `<iframe>` вне зоны видимости, браузер может не загружать его. Подробнее — в разделе [Отложенная загрузка](https://docs.kinescope.ru/dokumentaciya-pleera/vstraivanie/prostoe-vstraivanie-iframe/#отложенная-загрузка) на странице простого встраивания.

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

## Отключение постера плеера

Если показываете свой постер (например, `<img>` поверх плеера), отключите встроенный, чтобы не грузить картинку дважды:

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

## Автозапуск при видимости

Плеер стартует сам, когда попадает в видимую область. Удобно для роликов ниже первого экрана.

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

## Автозапуск при наведении

Видео играет, пока курсор над плеером; при уходе курсора — пауза. Работает до первого клика по плееру.

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

## Качество видео (VideoQuality) {#video-quality}

Тип качества в плеере:

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

- `'auto'` — адаптивное качество (ABR) под сеть и устройство
- `number` — высота кадра в пикселях: типично `360`, `480`, `720`, `1080`, `1440`, `2160`

### Через URL

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

См. параметр `quality` в [простом встраивании](https://docs.kinescope.ru/dokumentaciya-pleera/vstraivanie/prostoe-vstraivanie-iframe/).

### Через IFrame API

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

await player.setVideoQuality(720)

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

Методы — в [Управлении плеером](https://docs.kinescope.ru/dokumentaciya-pleera/vstraivanie/iframe-api-upravlenie-pleerom/).

## Ограничение максимального качества при ABR

По умолчанию ABR выбирает лучшее доступное качество. Можно задать потолок, чтобы снизить трафик:

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

## Что дальше?

- [Простое встраивание](https://docs.kinescope.ru/dokumentaciya-pleera/vstraivanie/prostoe-vstraivanie-iframe/) — полный список URL-параметров
- [Создание плеера](https://docs.kinescope.ru/dokumentaciya-pleera/vstraivanie/iframe-api-sozdanie-pleera/) — `behavior.preload`, `autoPlay` и другие опции
- [Возможные проблемы](https://docs.kinescope.ru/dokumentaciya-pleera/vozmozhnye-problemy/) — автозапуск и политики браузера