Інтеграція Rutube-відео у картку товару 1С-Бітрікс

Інтеграція RuTube-відео в карточку товара 1С-Бітрікс

RuTube — російська відеоплатформа, яка все частіше використовується як альтернатива YouTube на вітчизняних проектах. Технічно інтеграція з RuTube у карточку товара Бітрікс відрізняється від YouTube: інший формат Video ID, інша структура embed-посилань, відсутність публічного CDN для мініатюри. Розберемо, як це реалізується без зайвих залежностей.

Структура посилання RuTube та Video ID

RuTube використовує UUID (32 символи без дефісів) як ідентифікатор відео. Формати посилань:

• https://rutube.ru/video/a1b2c3d4e5f6a1b2c3d4e5f6a1b2c3d4/ — стандартне посилання
• 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 та визначати платформу за доменом посилання.

Отримання мініатюри через API

На відміну від YouTube, у RuTube немає публічного CDN для превью за шаблонним посиланням. Мініатюра потрібна отримати через 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-контенту, але розмітка не навредить.

Строки реалізації