Интеграция Rutube-видео в карточку товара 1С-Битрикс

Интеграция Rutube-видео в карточку товара 1С-Битрикс

Rutube — российская видеоплатформа, которая всё чаще используется как альтернатива YouTube на отечественных проектах. Технически интеграция с Rutube в карточку товара Битрикс отличается от YouTube: другой формат Video ID, другая структура embed-ссылок, отсутствие публичного CDN для thumbnail. Разберём, как это реализуется без лишних зависимостей.

Структура URL и Video ID Rutube

Rutube использует UUID (32 символа без дефисов) в качестве идентификатора видео. Форматы ссылок:

• https://rutube.ru/video/a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4/ — стандартный URL
• https://rutube.ru/play/embed/a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4 — уже embed-ссылка

Парсинг Video ID:

function parseRutubeId(string $url): ?string
{
    if (preg_match(
        '/rutube\.ru\/(?:video|play\/embed)\/([a-f0-9]{32})/',
        $url,
        $m
    )) {
        return $m[1];
    }
    return null;
}

function getRutubeEmbedUrl(string $videoId): string
{
    return 'https://rutube.ru/play/embed/' . $videoId
         . '?rel=0&showControls=1&skinColor=ff0000&startFrom=0&mute=0';
}

Параметры embed у Rutube значительно беднее YouTube: основные — rel (не показывать похожие видео), skinColor (цвет элементов плеера в HEX без #), mute.

Хранение в инфоблоке Битрикс

Аналогично YouTube — свойство типа «Строка» с кодом VIDEO_RUTUBE, при необходимости множественное:

CIBlockProperty::Add([
    'IBLOCK_ID'     => CATALOG_IBLOCK_ID,
    'NAME'          => 'Rutube-видео',
    'CODE'          => 'VIDEO_RUTUBE',
    'PROPERTY_TYPE' => 'S',
    'MULTIPLE'      => 'Y',
    'SORT'          => 210,
]);

Если на проекте используются оба источника (YouTube + Rutube), можно завести одно универсальное свойство VIDEO_URL и определять платформу по домену URL.

Получение thumbnail через API

В отличие от YouTube, у Rutube нет публичного CDN для превью по шаблонному URL. Thumbnail нужно получить через API:

GET https://rutube.ru/api/video/{VIDEO_ID}/?format=json

Ответ содержит поле thumbnail_url — прямую ссылку на обложку. Также доступны поля title, description, duration.

function getRutubeVideoInfo(string $videoId): ?array
{
    $cacheKey = 'rutube_' . $videoId;
    $cache = \Bitrix\Main\Data\Cache::createInstance();

    if ($cache->initCache(3600 * 24, $cacheKey, '/rutube/')) {
        return $cache->getVars();
    }

    $http     = new \Bitrix\Main\Web\HttpClient();
    $response = $http->get("https://rutube.ru/api/video/{$videoId}/?format=json");

    if ($http->getStatus() !== 200) {
        return null;
    }

    $data = json_decode($response, true);
    if (empty($data['id'])) {
        return null;
    }

    $result = [
        'id'            => $data['id'],
        'title'         => $data['title'] ?? '',
        'thumbnail_url' => $data['thumbnail_url'] ?? '',
        'duration'      => $data['duration'] ?? 0,
    ];

    $cache->startDataCache(3600 * 24, $cacheKey, '/rutube/');
    $cache->endDataCache($result);

    return $result;
}

Кеш на 24 часа обязателен — API Rutube не имеет опубликованных лимитов, но частые запросы при высоком трафике создают нагрузку и замедляют ответ страницы.

Вывод в шаблоне карточки товара

$rutubeUrls = (array)($arResult['PROPERTIES']['VIDEO_RUTUBE']['VALUE'] ?? []);

foreach ($rutubeUrls as $rutubeUrl) {
    $videoId = parseRutubeId($rutubeUrl);
    if (!$videoId) continue;

    $info     = getRutubeVideoInfo($videoId);
    $thumbUrl = $info['thumbnail_url'] ?? '/local/img/video-placeholder.jpg';
    $embedUrl = getRutubeEmbedUrl($videoId);

    echo '<div class="rutube-facade" data-embed="' . htmlspecialchars($embedUrl) . '">';
    echo '<img src="' . htmlspecialchars($thumbUrl) . '"
               alt="' . htmlspecialchars($info['title'] ?? 'Видеообзор') . '"
               loading="lazy" width="640" height="360">';
    echo '<button class="play-btn" aria-label="Смотреть видео"></button>';
    echo '</div>';
}

JavaScript-инициализация (аналогично YouTube facade):

document.querySelectorAll('.rutube-facade').forEach(function(el) {
    el.addEventListener('click', function() {
        const iframe = document.createElement('iframe');
        iframe.src = this.dataset.embed + '&autoplay=1';
        iframe.width = '640';
        iframe.height = '360';
        iframe.allowFullscreen = true;
        iframe.allow = 'autoplay; encrypted-media';
        this.replaceWith(iframe);
    });
});

Совместное использование YouTube и Rutube

Если в карточке нужна поддержка обоих сервисов, унифицируем обработку через одно свойство VIDEO_URL:

function detectVideoSource(string $url): string
{
    if (str_contains($url, 'youtube.com') || str_contains($url, 'youtu.be')) {
        return 'youtube';
    }
    if (str_contains($url, 'rutube.ru')) {
        return 'rutube';
    }
    return 'unknown';
}

Это упрощает работу менеджера: один тип свойства, вставить любую ссылку, система сама разберётся с embed.

SEO-разметка VideoObject для Rutube

Поисковики принимают VideoObject разметку и для Rutube:

if ($info) {
    $schema = [
        '@context'    => 'https://schema.org',
        '@type'       => 'VideoObject',
        'name'        => $info['title'],
        'thumbnailUrl'=> $info['thumbnail_url'],
        'embedUrl'    => getRutubeEmbedUrl($videoId),
        'duration'    => 'PT' . gmdate('H\Hi\Ms\S', $info['duration']),
        'uploadDate'  => date('c'),
    ];
    echo '<script type="application/ld+json">'
       . json_encode($schema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES)
       . '</script>';
}

Rutube-видео индексируется в поиске Яндекса и может появляться в видеовыдаче. Google пока не гарантирует индексацию Rutube-контента, но разметка не навредит.

Сроки реализации