Настройка видеогалереи товара 1С-Битрикс
Когда у товара три видеообзора, монтажное видео и распаковка — одного свойства VIDEO_URL уже не хватает. Нужна галерея: переключение между роликами, превью-миниатюры, синхронизация с фотогалереей. В Битриксе нет готового компонента для этого, поэтому решение собирается из инфраструктуры инфоблоков и кастомного шаблона.
Хранение нескольких видео в инфоблоке
Для множественного видео используется свойство типа 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 используют как подпись к видео — это стандартное поле для множественных свойств, редактируется прямо в карточке элемента.
Структура галереи: превью + основной плеер
Классический паттерн — большой плеер-слот сверху, ряд миниатюр снизу. При клике на миниатюру основной слот заменяет содержимое. Превью берётся из 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; ?>
Совмещение видеогалереи с фотогалереей
Магазины хотят единую галерею: сначала фото, потом видео. В компоненте catalog.element фото идут из $arResult['MORE_PHOTO'] — массив путей к картинкам. Видео-миниатюры добавляются в конец того же контейнера слайдера, но с атрибутом data-type="video". JavaScript обрабатывает клик: если data-type === 'video' — инициализирует iframe, иначе — показывает изображение.
Это позволяет использовать один экземпляр Swiper или Splide для обоих типов контента без дублирования логики.
Кеш и права доступа
Множественное свойство читается в рамках кешируемого блока. Проблема возникает при редактировании: менеджер добавил видео в админке, но кеш не сбросился. Обязательно регистрировать тег:
$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. Шаблон читает уже готовые превью без внешних запросов при рендеринге.