Браузер
На сайте SDK подключается скриптом и сам проигрывает рекламу в указанном контейнере — плеер на стороне сайта не нужен.
Подключите скрипт и стили
<link rel="stylesheet" href="https://cdn.adsdk.ru/web/v3/style.css" />
<script src="https://cdn.adsdk.ru/web/v3/ad-sdk.js"></script>После загрузки появляется глобальный объект window.adSDK. Типы TypeScript — в файле ad-sdk.d.ts из поставки.
Подготовьте контейнер
Плеер занимает весь контейнер, поэтому контейнер должен иметь размеры до загрузки рекламы:
<div id="ad-player-slot" style="width: 640px; height: 360px"></div>Размеры
SDK начинает загрузку, только когда у страницы есть размеры. Если за 3 секунды их нет, приходит AdError с кодом viewport_unavailable.
Создайте плеер и подпишитесь на события
const controller = await window.adSDK.init({
refWrapper: document.getElementById('ad-player-slot'),
lang: 'ru',
settings: { controls: ['ad-skip-btn'], volume: 0.3 },
});
const { loader } = controller;
loader.on('AdLoaded', ({ ad_creative_duration_sec }) => {
console.log('Длительность', ad_creative_duration_sec);
loader.playAd();
});
loader.on('AdClick', ({ url }) => window.open(url, '_blank'));
loader.on('AdError', ({ code, message }) => console.warn(code, message));
loader.on('AdsEnded', () => controller.destroy());Загрузите рекламу
loader.loadAd('https://ads.example.com/vast.xml', {
adMediaFileWidth: -1,
adMediaMaxDurationSec: -1,
autoplay: false,
controls: ['ad-skip-btn'],
os: 'web',
volume: 0.3,
});adSDK.init(options)
| Поле | Тип | Описание |
|---|---|---|
refWrapper | HTMLDivElement | Контейнер для плеера. Без него используется #ad-player-slot. |
lang | string | Язык интерфейса, по умолчанию en. См. Параметры. |
settings | object | Настройки плеера, все поля необязательны. |
Возвращает Promise<AdController>:
| Поле | Описание |
|---|---|
loader | Управление рекламой: методы и события. |
destroy() | Останавливает рекламу, отписывает обработчики, удаляет плеер из контейнера. |
Настройки settings
| Поле | Тип | По умолчанию | Описание |
|---|---|---|---|
controls | string[] | [] | Элементы управления. |
volume | number | 0.3 | Громкость от 0 до 1. |
autoplay | boolean | false | Начинать показ сразу после загрузки. |
adMediaFileWidth | number | -1 | Желаемая ширина видео в пикселях, -1 — автоматически. |
adMediaMaxDurationSec | number | -1 | Максимальная длительность в секундах, -1 — без ограничения. |
Те же поля и os: 'web' передаются вторым аргументом в loader.loadAd(url, settings).
Интерфейс плеера
В браузере всегда видны кнопка воспроизведения, громкость, полоса прогресса, оставшееся время и ERID. Кнопку пропуска включает ad-skip-btn. Посмотреть интерфейс вживую можно в песочнице с платформой «Браузер».
Подписка и отписка
const subscription = loader.on('AdStarted', payload => { /* … */ });
subscription.unsubscribe();Обработчик получает объект с данными события, ключи в snake_case.
Несколько плееров
Каждый вызов adSDK.init() создаёт независимый плеер со своим контроллером. Удалить все плееры сразу — window.adSDK.destroyAll().
Автозапуск в браузере
Браузеры блокируют автозапуск со звуком. Запускайте показ после действия пользователя или без звука. Если запуск заблокирован, приходит AdError с кодом permission_denied.