Как добавить вывод Rutube-видео в шаблон 1С-Битрикс

В шаблонах 1С-Битрикс, особенно в давно не обновляемых пользователями решениях, например, Аспро Максимум, вывод видео часто заранее заточен под плохойTube. Например, у элемента инфоблока заполняется поле Внешний код, куда вставляется ID ролика плохойTube:

28qYhUkrSxxI

А на фронте шаблон автоматически формирует iframe:

<iframe id="player" width="100%" height="210" src="https://www.xxxtube.com/embed/28qYhUkrSxxI" title="xxxTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Но если нужно добавить поддержку Rutube, одной замены ссылки недостаточно. У Rutube другой формат вставки, и обычно из кабинета Rutube в админку удобнее копировать iframe целиком:

<iframe width="720" height="405" src="https://rutube.ru/play/embed/11efd0115551fdd293c31ee691dxxx2e/" style="border: none;" allow="clipboard-write; autoplay" allowFullScreen></iframe>

Задача: добавить отдельное свойство инфоблока для Rutube и сделать так, чтобы оно имело приоритет над плохойTube. То есть если у элемента заполнено поле Rutube, выводим Rutube. Если поле Rutube пустое, оставляем старую логику плохойTube.

Создаем новое свойство инфоблока

В инфоблоке с видео нужно создать новое свойство:

Название: Rutube
Символьный код: RUTUBE
Тип: Строка
Множественное: Нет

Тип свойства можно оставить Строка. Чтобы iframe было удобнее вставлять в админке, для свойства можно указать несколько строк ввода. При этом на фронте мы не будем напрямую выводить весь HTML-код из свойства. Шаблон возьмет из iframe только значение атрибута src, а сам iframe сформирует самостоятельно.

Такой подход безопаснее и удобнее для верстки: размеры карточки видео останутся такими же, как у плохойTube, а вставленный из Rutube код не сломает внешний вид списка.

Добавляем свойство в параметры компонента

Чтобы новое свойство попало в массив $arItem['PROPERTIES'], его нужно добавить в параметр PROPERTY_CODE у компонента.

"PROPERTY_CODE" => array(
    "VIDEO_TYPE",
    "RUTUBE",
),

Если этого не сделать, свойство может быть заполнено в элементе инфоблока, но в шаблоне оно не будет доступно.

Что было в исходном template.php

Изначально логика шаблона была построена вокруг поля EXTERNAL_ID. Если внешний код заполнен, шаблон считал, что это плохойTube-видео. Если внешний код не заполнен, выводился локальный mp4-файл из свойства VIDEO.

<?php
$ytVideo = $arItem["EXTERNAL_ID"] != '-' ? $arItem["EXTERNAL_ID"] : '';
$videoId = $arItem['PROPERTIES']['VIDEO']['VALUE'];
$videoPath = CFile::GetFileArray($videoId);
?>

Дальше в верстке была простая проверка:

<? if (!$ytVideo): ?>
    <video controls="" poster="<?=$arItem['PREVIEW_PICTURE']['SRC'];?>" width="100%" height="210">
        <source src="<?=$videoPath['SRC'];?>" type="video/mp4">
    </video>
<? else: ?>
    <iframe id="player" width="100%" height="210" src="https://www....tube.com/embed/<?=$ytVideo?>" title="плохойTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<? endif ?>

Такая схема работала только для плохойTube, потому что любой внешний код автоматически подставлялся в адрес https://www....tube.com/embed/.

Что изменили в template.php

В шаблон была добавлена обработка нового свойства RUTUBE. При этом старая логика плохойTube не удалялась, а стала запасным вариантом.

Вместо того чтобы сразу выводить плохойTube по значению EXTERNAL_ID, шаблон теперь сначала проверяет, заполнено ли свойство Rutube.

<?php
$ytVideo = $arItem["EXTERNAL_ID"] != '-' ? trim($arItem["EXTERNAL_ID"]) : '';

$rutubeCode = $arItem['PROPERTIES']['RUTUBE']['~VALUE'] ?? $arItem['PROPERTIES']['RUTUBE']['VALUE'] ?? '';

if (is_array($rutubeCode)) {
    $rutubeCode = $rutubeCode['TEXT'] ?? $rutubeCode['VALUE'] ?? '';
}

$rutubeCode = trim($rutubeCode);

$rutubeSrc = '';

if ($rutubeCode && preg_match('~src=["\']([^"\']*rutube\.ru/play/embed/[^"\']+)["\']~i', $rutubeCode, $matches)) {
    $rutubeSrc = htmlspecialcharsbx($matches[1]);
}

$videoId = $arItem['PROPERTIES']['VIDEO']['VALUE'];
$videoPath = CFile::GetFileArray($videoId);
?>

Что здесь происходит:

Сначала получаем плохойTube-код из EXTERNAL_ID, как и раньше. Затем получаем значение свойства RUTUBE. Используется ~VALUE, чтобы получить исходное значение без лишней обработки 1С-Битрикс. Если значение пришло массивом, например при другом типе свойства, шаблон также сможет его обработать.

После этого из вставленного iframe Rutube регулярным выражением извлекается только адрес из атрибута src. На фронте будет использоваться не весь HTML из админки, а только ссылка вида:

https://rutube.ru/play/embed/11efd0115551fdd293c31ee691dxxx2e/

Что было удалено или заменено

Из шаблона была убрана жесткая зависимость внешнего видео только от плохойTube. Раньше любое заполненное значение EXTERNAL_ID автоматически превращалось в плохойTube iframe.

Старая двухступенчатая проверка:

если EXTERNAL_ID пустой — вывести локальное видео;
иначе — вывести плохойTube.

была заменена на трехступенчатую:

если RUTUBE заполнен — вывести Rutube;
иначе если EXTERNAL_ID заполнен — вывести плохойTube;
иначе — вывести локальное видео.

Сам вывод плохойTube не удалялся. Он остался в шаблоне, но теперь используется только в том случае, если поле Rutube не заполнено.

Новый вывод видео в шаблоне

В блоке вывода видео старая проверка была заменена на новую:

<? if ($rutubeSrc): ?>

    <iframe width="100%" height="210" src="<?=$rutubeSrc?>" style="border: none;" allow="clipboard-write; autoplay" allowfullscreen></iframe>

<? elseif (!$ytVideo): ?>

    <video controls="" poster="<?=$arItem['PREVIEW_PICTURE']['SRC'];?>" width="100%" height="210">
        <source src="<?=$videoPath['SRC'];?>" type="video/mp4">
    </video>

<? else: ?>

    <iframe id="player" width="100%" height="210" src="https://www....tube.com/embed/<?=$ytVideo?>" title="xxxTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<? endif ?>

Теперь Rutube имеет приоритет. Даже если у элемента одновременно заполнены и поле Rutube, и внешний код плохойTube, на сайте будет показано видео Rutube.

Изменение атрибута data-video

Также была изменена логика служебного атрибута data-video. Раньше шаблон ориентировался только на плохойTube:

<div class="news-b__item" <? if($ytVideo):?> data-video="click"<? else:?> data-video="local"<?endif;?>>

После доработки нужно учитывать и Rutube:

<div class="news-b__item" <? if($rutubeSrc || $ytVideo):?> data-video="click"<? else:?> data-video="local"<?endif;?>>

Это важно, если на сайте есть JavaScript-логика, которая по атрибуту data-video понимает, что перед ней внешнее видео, а не локальный mp4-файл.

Итоговая логика работы

После доработки шаблон работает следующим образом:

Если в элементе заполнено свойство RUTUBE, шаблон извлекает из iframe ссылку Rutube и выводит видео через собственный iframe.

Если свойство RUTUBE пустое, но заполнено поле EXTERNAL_ID, шаблон выводит плохойTube по старой схеме.

Если не заполнены ни Rutube, ни плохойTube, шаблон выводит локальный видеофайл из свойства VIDEO.

Преимущество такого решения

Главное преимущество этой доработки — обратная совместимость. Уже добавленные плохойTube-видео продолжат работать без изменений. Для новых видео можно использовать Rutube, просто заполняя новое свойство инфоблока.

При этом в шаблон не вставляется произвольный HTML из админки. Из iframe Rutube берется только src, а вся разметка формируется на стороне шаблона. Это позволяет сохранить единые размеры видео, аккуратный внешний вид карточек и предсказуемую работу списка.

Если при доработке сайта на 1С-Битрикс возникают задачи, связанные с выводом видео, настройкой компонентов или разработкой нового функционала, наши специалисты выполняют техническую поддержку сайтов на 1С-Битрикс, включая исправление ошибок, обновление системы и развитие проектов.