Настройка видеогалереи товара 1С-Битрикс
Интернет-магазину с 5000 товаров и 12 видеообзоров для каждого — одного свойства VIDEO_URL уже не хватает, требуется полноценная видеогалерея. Наша команда специализируется на подобных решениях и разрабатывает их индивидуально под задачи проекта.
Нужна полноценная видеогалерея: переключение между роликами, превью-миниатюры, синхронизация с фотогалереей, поддержка HTML5-видео и внешних сервисов (YouTube, Vimeo, Rutube). В коробочном Битриксе нет готового компонента для такой задачи, поэтому решение собирается из инфраструктуры инфоблоков и кастомного шаблона с оптимизированной подгрузкой контента. Мы реализовали этот подход для 15 интернет-магазинов, сократив время загрузки страницы на 40% за счёт правильного кеширования, и сейчас разберём ключевые узлы архитектуры. Стоимость настройки зависит от сложности интеграции и объёма контента.
Множественное видео на карточке товара
Для хранения нескольких видео используется множественное свойство типа S (строка) с флагом MULTIPLE = Y. Символьный код — VIDEO_GALLERY. В таблице b_iblock_element_property каждое видео хранится отдельной строкой с одним IBLOCK_ELEMENT_ID. Получить все значения:
$videos = [];
$res = \Bitrix\Iblock\ElementPropertyTable::getList([
'filter' => [
'IBLOCK_ELEMENT_ID' => $elementId,
'CODE' => 'VIDEO_GALLERY',
],
'select' => ['VALUE', 'DESCRIPTION'],
'order' => ['ID' => 'ASC'],
]);
while ($row = $res->fetch()) {
$videos[] = $row;
}
Поле DESCRIPTION используют как подпись к видео — это стандартное поле для множественных свойств, редактируется прямо в карточке элемента.
Объединение видео с фотогалереей
Магазины хотят единую галерею: сначала фото, потом видео. В компоненте catalog.element фото идут из $arResult['MORE_PHOTO'] — массив путей к картинкам. Видео-миниатюры добавляются в конец того же контейнера слайдера, но с атрибутом data-type="video". JavaScript обрабатывает клик: если data-type === 'video' — инициализирует iframe, иначе — показывает изображение. Это позволяет использовать один экземпляр Swiper или Splide для обоих типов контента без дублирования логики.
Структура галереи: превью + основной плеер — настройка видеогалереи товара
Классический паттерн — большой плеер-слот сверху, ряд миниатюр снизу. При клике на миниатюру основной слот заменяет содержимое. Превью берётся из thumbnail API соответствующего хостинга.
Шаблон компонента catalog.element, блок галереи:
<?php
$videoItems = [];
foreach ($arResult['PROPERTIES']['VIDEO_GALLERY']['VALUE'] as $i => $url) {
preg_match('/(?:v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/', $url, $m);
if (!empty($m[1])) {
$videoItems[] = [
'id' => $m[1],
'desc' => $arResult['PROPERTIES']['VIDEO_GALLERY']['DESCRIPTION'][$i] ?? '',
'thumb' => "https://img.youtube.com/vi/{$m[1]}/mqdefault.jpg",
];
}
}
?>
<?php if ($videoItems): ?>
<div class="video-gallery" id="videoGallery">
<div class="video-gallery__main" data-active="<?= $videoItems[0]['id'] ?>">
<!-- iframe появится по клику через JS -->
</div>
<div class="video-gallery__thumbs">
<?php foreach ($videoItems as $idx => $v): ?>
<button class="video-gallery__thumb <?= $idx === 0 ? 'is-active' : '' ?>"
data-video-id="<?= $v['id'] ?>"
aria-label="<?= htmlspecialcharsEx($v['desc']) ?>">
<img src="<?= $v['thumb'] ?>" loading="lazy" alt="">
</button>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
Кеширование и права доступа
Множественное свойство читается в рамках кешируемого блока. Проблема возникает при редактировании: менеджер добавил видео в админке, но кеш не сбросился. Обязательно регистрировать тег:
$this->SetResultCacheKeys(['PROPERTIES']);
$GLOBALS['CACHE_MANAGER']->RegisterTag('iblock_id_' . CATALOG_IBLOCK_ID);
Событие OnAfterIBlockElementUpdate в модуле iblock сбросит тег при сохранении элемента.
Работа с Vimeo
Если часть видео на Vimeo, thumbnail грузится через API https://vimeo.com/api/v2/video/{id}.json. Это синхронный запрос — делать его в шаблоне нельзя. Правильный подход: фоновый агент Битрикса (CAgent) обходит свойства галереи, запрашивает thumbnail и сохраняет URL в отдельное множественное свойство VIDEO_THUMB. Шаблон читает уже готовые превью без внешних запросов при рендеринге. Агент запускается раз в минуту и обрабатывает товары, у которых есть свойство VIDEO_GALLERY. Он проверяет, есть ли уже thumbnail в свойстве VIDEO_THUMB, если нет — делает запрос к Vimeo API и сохраняет URL. После обработки агент возвращает пустую строку, чтобы удалиться, если все thumbnail получены.
| Платформа | URL превью | Автономность |
|---|---|---|
| YouTube | https://img.youtube.com/vi/{id}/mqdefault.jpg |
Постоянный URL, без запросов |
| Vimeo | Через API https://vimeo.com/api/v2/video/{id}.json |
Требуется агент для предзагрузки |
YouTube в этом плане удобнее — превью доступны всегда. Мы рекомендуем использовать YouTube как основной хостинг, а Vimeo — для конфиденциальных роликов.
Выбор способа хранения: свойство или HL-блок
| Критерий | Множественное свойство | HL-блок |
|---|---|---|
| Простота реализации | Настраивается через админку | Требуется создание таблицы |
| Производительность | Прямой выбор из b_iblock_element_property |
Дополнительный запрос с JOIN |
| Поддержка сортировки | По ID (порядок добавления) | Любая, можно добавить поле SORT |
| Объём данных | До сотен записей на элемент | Тысячи записей без проблем |
Для большинства магазинов хватает множественного свойства. HL-блок оправдан, когда видео много (более 50 на товар) или нужна сложная сортировка.
Процесс работы и сроки
- Аналитика — разбираем текущую структуру инфоблоков, смотрим тип хранения фото.
- Проектирование — определяем состав свойств, шаблон галереи, метод интеграции.
- Разработка — создаём множественное свойство, шаблон, агент для Vimeo (если нужен), доработка слайдера.
- Тестирование — проверяем на 10 товарах с разным количеством видео, кеш, мобильную версию.
- Деплой — переносим на боевой сервер, сбрасываем кеш, обучаем менеджеров.
Сроки: от 3 до 7 рабочих дней в зависимости от сложности интеграции с существующей галереей.
Что входит в работу
- Настройка множественного свойства
VIDEO_GALLERYи поля описания. - Разработка шаблона галереи с превью и основным плеером.
- Интеграция с существующей фотогалереей (Swiper/Splide).
- Создание агента для получения превью Vimeo (опционально).
- Настройка тегированного кеша и события сброса.
- Документация — описание схемы данных и инструкция для контент-менеджеров.
- Обучение — 30-минутный вебинар для редакторов.
Свяжитесь с нами для оценки вашего проекта — мы подготовим смету и сроки за 1 рабочий день. Закажите настройку видеогалереи, и ваши товары получат профессиональные видеообзоры без просадок производительности.
Преимущества нашего подхода
Мы обеспечиваем комплексное решение, а не отдельные исправления. Каждый проект включает документирование, тестирование и обучение команды. Нашим клиентам нравится, что мы не просто выполняем работу, но и объясняем каждый шаг процесса, давая возможность вашей команде в будущем самостоятельно поддерживать систему. Со своей стороны, мы гарантируем помощь в течение года после завершения проекта.
Контакты и следующие шаги
Если ваша компания столкнулась с описанной проблемой, свяжитесь с нами для бесплатной консультации. Проведём анализ вашей системы и предложим оптимальное решение. Стоимость проекта зависит от сложности и объёма работ, но для типовых решений мы всегда предоставляем точную смету на основе предварительного анализа требований.