Mini-player на PDP

Этот раздел относится к Web SDK. Для собственного интерфейса используйте Mini-player API, для приложения — Mobile SDK.

Веб-интеграция​

После регистрации домена и настройки идентификатора товара со стороны ShopStory добавьте скрипт в конец <body> на страницах, где разрешён виджет:

<script
  id="shopstory-pip"
  type="application/javascript"
  src="https://app.shopstory.live/sdk/shopstory-pip-sdk/shopstory-pip-sdk-v1.x.min.js"
  crossorigin="anonymous"
  charset="utf-8"
  async
></script>

v1.x входит в production URL буквально. Используйте имя файла без замены x.

Этот auto-init bundle работает отдельно от основного ShopStorySDK.show(): он не получает объект actions из каталога и не должен загружаться вместе с основным bundle без схемы из integration handoff. Базовое действие в player, открытом из mini-player, ведёт на URL товара. Direct cart для этого пути оформляется как кастомная commerce-интеграция.

В зависимости от конфигурации проекта скрипт подключает:

• mini-player на карточке товара, если с товаром связан live или VOD;
• live-виджет во время текущего эфира.

В MPA скрипт можно подключить в общем шаблоне сайта, исключив корзину и checkout. Для SPA ShopStory отдельно проверяет router lifecycle и смену DOM/SKU. В обоих случаях стороны согласуют селектор или источник идентификатора товара, разрешённые домены и включённые компоненты.

Отдельный DOM-контейнер для PiP создавать не нужно: скрипт добавляет свой контейнер в document.body. Товарный ID должен оставаться доступным в согласованном месте на PDP. Если существующая разметка не даёт получить ID, её потребуется дополнить. Подробности: Product mini-player в Web SDK.

Порядок загрузки на PDP​

1. Браузер загружает скрипт с async параллельно разбору HTML.
2. SDK определяет конфигурацию сайта и товар на PDP. Если включён показ после прокрутки, проверка контента начинается при достижении заданного порога; без этого условия — при инициализации виджета.
3. SDK асинхронно запрашивает stream-state для товара. При включённом live-уведомлении параллельно проверяется online.
4. После ответа SDK запрашивает готовое превью либо поток для продолжения просмотра. Открытие PDP не запускает обработку видео на сервере.

Порог прокрутки может применяться только к первому показу. При такой настройке возврат из полного плеера с подходящим состоянием Continuous Video проходит без ожидания прокрутки.

Отрисовку PDP, загрузку цены и работу корзины не нужно связывать с готовностью PiP. При no_active_stream товарный виджет не появляется, файл превью и HLS для него не запрашиваются. Скрипт и запрос состояния остаются частью загрузки страницы. Если отдельно включено live-уведомление, оно может появиться и без связанного с товаром видео.

Выполнение JavaScript, сеть и декодирование видео используют ресурсы браузера даже при асинхронной загрузке. При приёмке сравните LCP/INP и Network на одной PDP с включённым и отключённым PiP. Подробнее: MDN: script async.

Минимальная проверка:

1. Идентификатор товара на странице совпадает со строковым идентификатором в согласованном фиде.
2. stream-state возвращает body.status: "active" для тестового товара.
3. ShopStory включил mini-player для текущего домена и шаблона карточки товара.
4. Content Security Policy сайта разрешает согласованные источники ShopStory.
5. На PDP без готового контента товарный PiP скрыт и не запрашивает медиа.
6. Если включён Continuous Video, пройдите путь «полный плеер → товар → полный плеер»: проверьте позицию VOD, возврат в той же вкладке и управление звуком.

Ответ active описывает состояние серверной части. Отрисовка на странице отдельно зависит от настройки DOM-шаблона.

Режимы PiP на PDP​

PiP — плавающий виджет внутри страницы товара. Виджет автоматически оказывается в одном из состояний ниже — режим не выбирает ни интегратор, ни посетитель. ShopStory включает нужные режимы и профиль медиа в конфигурации проекта, а скрипт выбирает состояние по пути входа посетителя, статусу эфира товара и поддержке браузера. В ранее настроенных интеграциях могут сохраняться GIF-превью.

Деградация до постера происходит автоматически: виджет не остаётся в состоянии бесконечной загрузки.

Превью записи с субтитрами​

ShopStory заранее создаёт клипы из связанных с товаром записей. Приоритет получает эпизод об этом товаре; если подходящего момента нет, возможен общий фрагмент связанного эфира. API выбирает для PDP одно готовое превью.

Параметры используемого профиля коротких превью:

Средний размер превью — около 128 кБ; 90% файлов не превышают 182 кБ. Замер на 6 сентября 2026 года: 241 файл, выбранный API для 241 товара одного рабочего каталога; 1 кБ = 1000 байт. Размеры относятся к одному клипу, без скриптов, постера и служебных запросов. Это ориентир для оценки трафика, не гарантированный предел.

Превью воспроизводится внутри страницы. Если браузер сообщает, что VP9 не поддерживается, SDK показывает постер без запроса WebM. При ошибке загрузки или воспроизведения SDK также переходит на постер; при недоступном постере остаётся статический фон.

Клик открывает полный плеер около выбранного эпизода. Субтитры короткого превью не означают, что субтитры включены для всей записи.

Live в PiP​

Когда эфир, связанный с товаром, идёт прямо сейчас, ShopStory может включить для проекта показ этого эфира в PiP — без предварительного открытия полного плеера.

1. Посетитель заходит на PDP во время эфира. PiP показывает текущий live с актуального момента, без звука.
2. Посетитель включает звук кнопкой в PiP. Состояние звука действует только в рамках текущего показа и не сохраняется между визитами.
3. Клик открывает полный плеер с текущим эфиром.
4. После завершения эфира и обработки записи PiP на этом PDP переключается на превью записи.

Пока эфир идёт, PiP показывает live, а не превью записи — даже если превью прошлых эфиров уже готово. Трафик зависит от качества потока и длительности просмотра; размер короткого WebM-превью к этому режиму не относится. При ошибке потока SDK показывает постер или статический фон.

Continuous Video: полный плеер → PDP → полный плеер​

Этот режим сохраняет просмотр при переходе к товару. Для него полный Web SDK и PDP размещают на одном origin сайта продавца, а переход выполняют в той же вкладке.

1. Пользователь нажимает фото или название товара в полном плеере. SDK сохраняет эфир, товар и позицию просмотра, затем открывает URL товара из фида. Кнопка «Купить» выполняет отдельное действие и сама по себе этот переход не запускает.
2. PiP возобновляет просмотр, если сохранённое состояние просмотра соответствует товару и эфиру из ответа API. Скопированной ссылки без состояния просмотра в этой вкладке недостаточно.
3. VOD продолжается с сохранённой позиции, live — с текущего эфира. HLS загружается по необходимости в отдельном iframe. При переходе между HTML-страницами возможна пауза на загрузку и буферизацию.
4. Возврат из PiP открывает полный плеер в той же вкладке и передаёт актуальную позицию VOD.

Для продолжения просмотра нужен доступ к sessionStorage. Серверные редиректы и маршрутизатор должны сохранять параметры перехода, добавленные SDK, до инициализации PiP. Состоянием просмотра управляет SDK.

PiP пытается продолжить воспроизведение со звуком. Если браузер запрещает такой autoplay, видео запускается без звука; пользователь включает его кнопкой в PiP. Эти ограничения задаёт браузер: MDN: autoplay. При ошибке медиапотока SDK использует доступное превью или постер.

В Continuous Video трафик зависит от качества потока и длительности просмотра. Размер короткого WebM-превью к этому режиму не относится.

Следующие шаги​

• Tracking и UTM
• Методы основного Web SDK