Складання та оптимізація відеогалереї на 1С-Бітрікс

Ви завантажуєте на сайт 50 навчальних відео — і сторінка починає завантажуватись 15 секунд. YouTube-плеєри блокуються, сервер задихається від 500 МБ медіафайлів. Знайома ситуація? Стандартні засоби 1С-Бітрікс не містять готової відеогалереї — доводиться збирати рішення з компонентів інфоблоків, доопрацьовувати шаблони та оптимізувати завантаження. Наша компанія має 10+ років досвіду роботи з Бітрікс, реалізувала понад 50 проєктів відеогалерей. Гарантія 12 місяців. У цій статті розберемо, як проєктувати інфоблок, вибирати тип зберігання, реалізувати ледаче завантаження та досягти швидкості завантаження сторінки менше 2 секунд навіть з 20+ відео. Ледаче завантаження зменшує час завантаження на 40% порівняно з традиційним підходом, а правильне зберігання відео знижує навантаження на сервер у 3–5 разів.

Як створити інфоблок для відеогалереї?

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

• 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), сортування та пагінації. Документація 1С-Бітрікс по компоненту 2.0 описує всі параметри.

У 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" ... title="YouTube video"></iframe>'; } elseif ($arResult["PROPERTIES"]["VIDEO_TYPE"]["VALUE"] === "local") { $fileUrl = CFile::GetPath($arResult["PROPERTIES"]["VIDEO_FILE"]["VALUE"]); echo '<video src="' . $fileUrl . '" controls></video>'; } 

Завантаження локальних відеофайлів: проблеми та рішення

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

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

Що вибрати: YouTube чи локальне зберігання?

YouTube-інтеграція економить місце та трафік, але ви залежите від стороннього сервісу. Локальне зберігання дає повний контроль, але вимагає потужного сервера. S3 — золота середина: дешево, швидко, масштабовано.

Чому ледаче завантаження критичне для продуктивності?

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

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

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

Що входить у роботу з налаштування відеогалереї

Ви отримуєте: документацію, доступи, вихідний код, навчання співробітників. Оцінимо ваш проєкт за 1 день — зв'яжіться з нами для консультації.

Процес роботи

1. Аналітика: вивчаємо поточну архітектуру сайту, кількість та обсяг відео, вимоги до інтеграції з 1С або YouTube.
2. Проєктування: вибираємо тип зберігання (локальний, хмарний, YouTube), проєктуємо інфоблок та шаблони.
3. Реалізація: створюємо інфоблок, компоненти, доопрацьовуємо шаблони, реалізуємо ледаче завантаження.
4. Тестування: перевіряємо на популярних пристроях та браузерах, заміряємо продуктивність.
5. Деплой: викладаємо на бойовий сервер, налаштовуємо резервне копіювання та моніторинг.

Терміни та гарантії

Орієнтовний термін робіт — від 10 до 20 днів залежно від складності. Вартість розраховується індивідуально. Гарантуємо 12 місяців технічної підтримки після здачі проєкту. Замовте налаштування відеогалереї та отримайте консультацію. Щоб замовити налаштування відеогалереї, зв'яжіться з нами — ми підготуємо комерційну пропозицію протягом дня.