Налаштування відеогалереї на 1С-Бітрікс

Налаштування відеогалереї на 1С-Bitrix

Відео на сайті — це або зовнішні посилання (YouTube, Vimeo), або власні файли, розміщені на сервері або CDN. У обох випадках Bitrix не надає готового рішення «відеогалерея» — доведеться збирати з компонентів інфоблоків та дорабляти шаблон.

Структура інфоблока для відеогалереї

Стандартний підхід: створюються інфоблок типу Відеогалерея з набором властивостей. Мінімальний набір властивостей для відео-елемента:

• VIDEO_URL — тип Рядок, для посилання на YouTube/Vimeo
• VIDEO_FILE — тип Файл, для завантажених відеофайлів (mp4)
• PREVIEW_IMAGE — тип Файл, превью-зображення (або використовується стандартне PREVIEW_PICTURE елемента)
• DURATION — тип Рядок, тривалість відео
• VIDEO_TYPE — тип Список, значення: youtube, vimeo, local

Структура зберігається в таблицях b_iblock_element та b_iblock_element_prop_s{iblock_id} (рядкові властивості) / b_iblock_element_prop_m{iblock_id} (множественні). ID інфоблока фіксуйте в константі або в b_option, а не жорстко кодуйте в кожному компоненті.

Компонент виводу: list + detail

Для списку відео використовується bitrix:news.list або bitrix:catalog (якщо відео — частина каталогу). Компонент викликається з параметрами фільтрації по типу (FILTER), сортування та пагінації.

У template.php списку для кожного елемента генеруйте картку з превью та кнопкою play. Якщо VIDEO_TYPE = youtube, з URL вигляду https://www.youtube.com/watch?v=XXXXXXXXXXX витягніть ID відео та сформуйте превью через https://img.youtube.com/vi/{ID}/maxresdefault.jpg — це позбавляє від необхідності окремо завантажувати превью вручну.

Для детального перегляду — компонент bitrix:news.detail. У шаблоні перевіряйте тип відео та рендеріте відповідний плеєр:

if ($arResult["PROPERTIES"]["VIDEO_TYPE"]["VALUE"] === "youtube") {
    $videoId = extractYoutubeId($arResult["PROPERTIES"]["VIDEO_URL"]["VALUE"]);
    echo '<iframe src="https://www.youtube.com/embed/' . $videoId . '?autoplay=1" ...></iframe>';
} elseif ($arResult["PROPERTIES"]["VIDEO_TYPE"]["VALUE"] === "local") {
    $fileUrl = CFile::GetPath($arResult["PROPERTIES"]["VIDEO_FILE"]["VALUE"]);
    echo '<video src="' . $fileUrl . '" controls></video>';
}

Завантаження локальних відеофайлів

Завантаження через стандартний файловий менеджер Bitrix працює, але має обмеження: upload_max_filesize та post_max_size у php.ini обмежують розмір. Для файлів > 100 МБ потрібно або піднімати ліміти, або завантажувати через FTP з подальшою прив'язкою через CFile::RegisterFile().

Зберігання відео на тому ж сервері, що й веб-сайт — погана практика при великих обсягах. Модуль bitrix:clouds дозволяє налаштувати зберігання файлів у S3-сумісному сховищі (Яндекс.Облако, Mail.ru Cloud тощо). Після налаштування всі завантажувані файли автоматично йдуть в облако, а в БД зберігається шлях.

Ленива завантаженням та продуктивність

Відео — тяжелий контент. Для галереї з превью використовуйте loading="lazy" для превью <img>, а самі плеєри не вбудовуйте одразу — рендеріте <div> з превью та завантажуйте <iframe> тільки по кліку:

document.querySelectorAll('.video-preview').forEach(el => {
    el.addEventListener('click', function() {
        this.innerHTML = '<iframe src="' + this.dataset.videoUrl + '?autoplay=1" ...></iframe>';
    });
});

Це критично при галереї з 20+ відео — без такого підходу сторінка робить 20+ запитів до YouTube при завантаженні, що убиває продуктивність та може привести до блокування від YouTube за перевищення лімітів вбудованих плеєрів.

Кеширування компонента bitrix:news.list з TTL 3600 секунд для відеогалереї виправдане — контент оновлюється рідко. Перевіртье, що при додаванні нового відео через адміністратора кеш скидається: за замовчуванням CIBlockElement::Add() викликає BXClearCache для відповідного інфоблока.