Настройка видеогалереи на 1С-Битрикс

Настройка видеогалереи на 1С-Битрикс

Видео на сайте — это либо внешние ссылки (YouTube, Vimeo), либо собственные файлы, размещённые на сервере или CDN. В обоих случаях Битрикс не предоставляет готового решения «видеогалерея» — придётся собирать из компонентов инфоблоков плюс дорабатывать шаблон.

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

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

• 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>';
}

Загрузка локальных видеофайлов

Загрузка видео через стандартный файловый менеджер Битрикса работает, но имеет ограничения: 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 для соответствующего инфоблока.