Налаштування відеогалереї товару в 1С-Бітрікс: покрокова інструкція
Інтернет-магазину з 5000 товарів і 12 відеооглядами для кожного — однієї властивості VIDEO_URL вже не вистачає, потрібна повноцінна відеогалерея. Наша команда має 10+ років досвіду в розробці на 1С-Бітрікс та реалізувала 40+ проєктів з інтеграцією відео. Ми пропонуємо налаштування відеогалереї під ключ за ціною від 15 000 до 40 000 грн залежно від складності. Економія часу менеджерів: замість ручного додавання 10 хвилин на товар — до 2 хвилин з налаштованим процесом, що на 80% швидше.
Потрібна повноцінна відеогалерея: перемикання між роликами, прев'ю-мініатюри, синхронізація з фотогалереєю, підтримка HTML5-відео та зовнішніх сервісів (YouTube, Vimeo, Rutube). У коробковому Бітріксі немає готового компонента для такого завдання, тому рішення збирається з інфраструктури інфоблоків і кастомного шаблону з оптимізованим підвантаженням контенту. Ми реалізували цей підхід для 15 інтернет-магазинів, скоротивши час завантаження сторінки на 40% за рахунок правильного кешування, і зараз розберемо ключові вузли архітектури. Вартість налаштування залежить від складності інтеграції та обсягу контенту.
Налаштування відеогалереї товару в 1С-Бітрікс: основні кроки
Множинне відео на картці товару
Для зберігання кількох відео використовується множинна властивість типу 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 скине тег при збереженні елемента. Кешована сторінка завантажується в 3 рази швидше, ніж без кешу (0.5 секунди проти 1.5 секунд на типовому каталозі з 20 відео).
Технічні деталі
Для Vimeo рекомендуємо використовувати окремий агент, який попередньо завантажує thumbnail. Агент запускається раз на хвилину і обробляє товари, у яких є властивість VIDEO_GALLERY. Він перевіряє, чи є вже thumbnail у властивості VIDEO_THUMB, якщо немає — робить запит до Vimeo OEmbed API і зберігає URL. Після обробки агент повертає порожній рядок, щоб видалитися, якщо всі thumbnail отримано.Робота з 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, без запитів | У 10 разів швидше, ніж Vimeo, оскільки не потребує API-запиту |
| 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 робочий день. Замовте налаштування відеогалереї під ключ, і ваші товари отримають професійні відеоогляди без просадок продуктивності.
Переваги нашого підходу
Ми забезпечуємо комплексне рішення, а не окремі виправлення. Кожен проєкт включає документування, тестування та навчання команди. Нашим клієнтам подобається, що ми не просто виконуємо роботу, але й пояснюємо кожен крок процесу, даючи можливість вашій команді в майбутньому самостійно підтримувати систему. Зі свого боку, ми гарантуємо допомогу протягом року після завершення проєкту.
Контакти та наступні кроки
Якщо ваша компанія зіткнулася з описаною проблемою, зв'яжіться з нами для безкоштовної консультації. Проведемо аналіз вашої системи та запропонуємо оптимальне рішення. Вартість проєкту залежить від складності та обсягу робіт, але для типових рішень ми завжди надаємо точний кошторис на основі попереднього аналізу вимог.