# Реклама


Плеер показывает видеорекламу по VAST/VPAID-тегу или через Google IMA. Настроить можно параметром URL или через IFrame API.

Базовый сценарий для сайта без API — в разделе [Реклама](https://docs.kinescope.ru/videopleer-nastrojka-i-vstraivanie/reklama/) продуктовой документации. Ниже — программная настройка.

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

Реклама может не работать с DRM-защищённым видео. Блокировщики рекламы и политики автозапуска браузера тоже могут мешать показу.



## Простое встраивание: `adtagurl`

```html
<iframe
  src="https://kinescope.io/embed/VIDEO_ID?adtagurl=https%3A%2F%2Fexample.com%2Fvast.xml"
  allow="autoplay; fullscreen; picture-in-picture; encrypted-media; gyroscope; accelerometer; clipboard-write; screen-wake-lock;"
  style="border: none;"
></iframe>
```

Значение `adtagurl` должно быть URL-encoded. Параметр в статусе `@experimental`.

## IFrame API: `playlist[].ad`

Задаётся при [`create()`](https://docs.kinescope.ru/dokumentaciya-pleera/vstraivanie/iframe-api-sozdanie-pleera/#create) или через [`setPlaylistItemOptions`](https://docs.kinescope.ru/dokumentaciya-pleera/vstraivanie/iframe-api-upravlenie-pleerom/#setPlaylistItemOptions).

### Pre-roll по URL тега

```js
playerFactory.create('player', {
  url: 'https://kinescope.io/VIDEO_ID',
  playlist: [
    {
      ad: {
        adTagUrl: 'https://example.com/vast.xml',
      },
    },
  ],
})
```

Можно передать массив URL: `adTagUrl: ['https://…/a.xml', 'https://…/b.xml']`.

### Mid-roll и несколько точек

Для точек показа передайте массив элементов с `trigger`:

```js
playlist: [
  {
    ad: [
      {
        id: 'preroll',
        adTagUrl: 'https://example.com/preroll.xml',
        trigger: { percentages: [0] },
      },
      {
        id: 'midroll',
        adTagUrl: 'https://example.com/midroll.xml',
        trigger: { timePoints: [60, 180] },
      },
      {
        id: 'every-10-min',
        adTagUrl: 'https://example.com/recurring.xml',
        trigger: { interval: 600 }, // каждые 10 минут
      },
    ],
  },
]
```

| Поле trigger | Описание |
| :--- | :--- |
| `percentages` | Процент текущего времени, например `[0, 50]` |
| `timePoints` | Секунды, например `[60, 600]` |
| `interval` | Повтор каждые N секунд, например `600` |

В каждом элементе массива укажите один способ срабатывания.

### Варианты источника рекламы

| Поле | Статус | Описание |
| :--- | :--- | :--- |
| `adTagUrl` | публичный | URL VAST/VPAID-тега (или массив) |
| `adTag` | `@experimental` | Готовый текст тега (или массив) |
| `adsRequest` | `@experimental` | Объект запроса [Google IMA](https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side) (`adsRequest`) |
| `yaOptions` | `@experimental` | Настройки [Yandex Video Ads SDK](https://yandex.ru/dev/video-sdk/doc/ru/sdk-html5/AdConfig-interface) |

В одном элементе рекламы используйте только одно из этих полей.

Пример с готовым тегом:

```js
ad: {
  adTag: `<?xml version="1.0"?><VAST version="3.0">…</VAST>`,
}
```

## Событие рекламной паузы

```js
player.on(player.Events.AdBreakStateChanged, (event) => {
  if (event.data.active) {
    // реклама идёт
  } else {
    // рекламный брейк закончился
  }
})
```

Событие [`AdBreakStateChanged`](https://docs.kinescope.ru/dokumentaciya-pleera/vstraivanie/iframe-api-upravlenie-pleerom/#Events.AdBreakStateChanged) — `@experimental`.

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

- [Управление плеером](https://docs.kinescope.ru/dokumentaciya-pleera/vstraivanie/iframe-api-upravlenie-pleerom/) — `playlist[].ad`, события
- [DRM-шифрование](https://docs.kinescope.ru/zashita-kontenta/drm-shifrovanie-faylov/) — ограничения при защите контента
- [Реклама в шаблонах](https://docs.kinescope.ru/videopleer-nastrojka-i-vstraivanie/reklama/) — сценарий без API
- [Простое встраивание](https://docs.kinescope.ru/dokumentaciya-pleera/vstraivanie/prostoe-vstraivanie-iframe/) — другие URL-параметры