Почему видео из Rutube отображается как черный квадрат в 1С и как это исправить

Программист 1С v8.3 (Управляемые формы) IT и автоматизация бизнеса
← На главную

При разработке интерфейсов в 1С часто возникает задача интеграции мультимедийного контента. Если с встраиванием видео из YouTube проблем обычно не возникает, то попытка интегрировать отечественные платформы, такие как Rutube или VK Видео, часто заканчивается появлением пустого черного прямоугольника. В этой статье мы подробно разберем, почему так происходит, проанализируем техническую сторону вопроса и найдем способы решения этой проблемы.

Суть проблемы: почему YouTube работает, а Rutube — нет

Рассмотрим стандартную ситуацию: разработчик берет код для вставки (iframe), предоставленный видеохостингом, и помещает его в ПолеHTMLДокумента на управляемой форме 1С. Для YouTube код выглядит примерно так:


<iframe width="560" height="315" src="https://www.youtube.com/embed/идентификатор" ...></iframe>

В этом случае видео успешно загружается. Однако при использовании аналогичного кода от Rutube в 1С отображается только черный фон. Проанализируем ситуацию: на обычной веб-странице в браузере (Chrome, Edge) оба видео работают корректно. Это означает, что проблема кроется не в самом HTML-коде, а во внутреннем движке, который 1С использует для отображения веб-контента.

Выясняем техническую причину: ошибка синтаксиса JavaScript

Проанализируем работу встроенного браузера 1С. Долгое время платформа использовала движок WebKit. Несмотря на то что 1С периодически обновляет компоненты, версия WebKit в платформе часто отстает от актуальных версий современных браузеров.

Основная причина «черного экрана» при вставке Rutube заключается в использовании современными российскими сервисами новых стандартов JavaScript, в частности ES2020. При попытке отладки кода внутри 1С можно обнаружить следующую ошибку:

SyntaxError: Unexpected token '?' (anonymous function) -- index.js

Этот символ ? указывает на использование оператора Optional Chaining (опциональная цепочка) или Nullish Coalescing (оператор нулевого слияния). Плеер Rutube написан с использованием этих современных конструкций. Когда встроенный движок WebKit в 1С сталкивается с таким кодом, он не может его интерпретировать, выполнение скрипта прерывается, и инициализация плеера останавливается. В результате мы видим пустой контейнер (черный квадрат), так как управляющие элементы плеера просто не были отрисованы.

Решение №1: Принудительный переход на использование Microsoft Edge WebView2

Начиная с последних релизов платформы 8.3 (в частности, активно это внедряется в версиях выше 8.3.18 и 8.3.26), 1С предоставляет возможность использовать более современный движок рендеринга — Microsoft Edge WebView2, основанный на Chromium. Этот движок лишен проблем со старым синтаксисом JavaScript.

Для того чтобы 1С начала использовать WebView2 вместо старого WebKit, необходимо выполнить следующие действия:

  1. Установка компоненты: Убедимся, что на компьютере пользователя установлен Microsoft Edge WebView2 Runtime. В современных ОС Windows он часто предустановлен, но для корректной работы в 1С рекомендуется версия «Evergreen».
  2. Настройка платформы: В параметрах запуска 1С или в настройках конкретного пользователя (в зависимости от версии) может потребоваться включение режима использования нового движка.
  3. Программная проверка: Проанализируем ситуацию программно. В коде 1С мы можем влиять на то, как отображается контент. Если платформа поддерживает WebView2, Rutube заработает автоматически, так как движок поймет синтаксис ?..

Решение №2: Использование прослойки для совместимости (Polyfills)

Если нет возможности обновить платформу или гарантировать наличие WebView2 у всех пользователей, рассмотрим вариант создания «обертки» для кода Rutube. Мы можем попытаться внедрить скрипты-полифиллы, которые эмулируют поведение современного JavaScript в старом WebKit.

Посмотрим на пример формирования текста HTML для поля документа:


ТекстHTML = 
"<html>
|<head>
|   <meta http-equiv=""X-UA-Compatible"" content=""IE=edge"" />
|   <script src=""https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.12.1/polyfill.min.js""></script>
|</head>
|<body style=""margin:0; padding:0; overflow:hidden;"">
|   <iframe width=""100%"" height=""100%"" src=""https://rutube.ru/play/embed/идентификатор"" frameborder=""0"" allow=""clipboard-write; autoplay"" allowfullscreen></iframe>
|</body>
|</html>";

Важно помнить, что использование внешних библиотек (полифиллов) не всегда гарантирует успех, так как ошибка может возникать в самом первом загружаемом скрипте Rutube, управление которым мы не можем перехватить внутри iframe.

Решение №3: Открытие видео в системном браузере

Если задача не требует жесткой интеграции видео именно в интерфейс формы, самым надежным решением будет использование метода ЗапуститьПриложение(). Это позволит открыть видео в полноценном браузере пользователя, где гарантированно поддерживаются все современные скрипты.


Процедура ОткрытьВидеоНаRutube(ИдентификаторВидео)
    АдресВидео = "https://rutube.ru/video/" + ИдентификаторВидео;
    ЗапуститьПриложение(АдресВидео);
КонецПроцедуры

Этот подход исключает любые ошибки отображения и гарантирует пользователю полный функционал плеера (высокое качество, полноэкранный режим, комментарии).

Рекомендации по отладке интерфейса

Чтобы понять, что именно идет не так внутри ПоляHTMLДокумента, воспользуемся инструментами отладки. В современных версиях 1С можно вызвать контекстное меню на поле HTML (если это разрешено в свойствах элемента) и выбрать пункт «Исследовать элемент». Это откроет консоль разработчика (подобную той, что есть в Chrome), где во вкладке Console вы увидите все ошибки JavaScript, мешающие работе плеера.

Резюмируем: Основная проблема с Rutube в 1С — это «несовпадение поколений» технологий. Видеохостинг использует завтрашние стандарты веба, а встроенный WebKit 1С застрял в стандартах пятилетней давности. Лучший способ решения — переход на использование движка WebView2 через обновление платформы 1С и установку соответствующих компонентов Windows.

← На главную