С переходом платформы 1С:Предприятие на современный движок WebKit (в версиях 8.3.14 и выше) разработчики столкнулись с изменением механизмов работы ПоляHTMLДокумента. Старые методы, работавшие в Internet Explorer (например, УстановитьТекст()), больше не актуальны в управляемых формах. В этой статье мы подробно разберем, как адаптировать ваш код для вывода мультимедийного контента, обеспечив стабильное воспроизведение видео и корректное отображение графики.
В обычных формах для загрузки HTML-кода использовался специализированный метод программного объекта. В управляемых формах архитектура изменилась. Рассмотрим, как теперь передавать данные в веб-контейнер. Выясним причину: ПолеHTMLДокумента в управляемом интерфейсе напрямую связано с реквизитом формы строкового типа.
Для отображения вашего контента достаточно просто присвоить значение переменной, которая указана в свойстве Данные элемента формы. Разберем по шагам:
ТекстHTML) типа Строка.
&НаСервере
Процедура СформироватьКонтентНаСервере()
ТекстHTML = "<html><body><h1>Привет, WebKit!</h1></body></html>";
КонецПроцедуры
Проанализируем ситуацию, когда нам нужно вывести картинку, хранящуюся в базе 1С или полученную динамически, без сохранения на диск. Наиболее надежный способ для WebKit — использование схемы data:image с кодированием в Base64. Проанализируем пример кода, который позволяет сформировать правильный HTML-тег:
ДанныеКартинки = Base64Строка(Новый ДвоичныеДанные(ПутьКФайлу));
СтрокаHTML = "<html><body>";
СтрокаHTML = СтрокаHTML + "<img src=""data:image/jpeg;base64," + ДанныеКартинки + """ style=""max-width:100%;"" />";
СтрокаHTML = СтрокаHTML + "</body></html>";
ТекстHTML = СтрокаHTML;
Важно помнить, что для больших изображений этот метод может потреблять значительный объем оперативной памяти, так как строка Base64 на 33% больше исходного бинарного файла.
Движок WebKit поддерживает стандарт HTML5 Video. Это позволяет нам отказаться от внешних плагинов и использовать нативный тег <video>. Рассмотрим подробнее структуру HTML-шаблона для воспроизведения роликов в формате MP4. Особое внимание стоит уделить атрибутам controls (панель управления) и autoplay.
Пример реализации шаблона:
ШаблонВидео =
"<html>
|<body style=""margin:0; padding:0; overflow:hidden;"">
| <video id=""player"" controls autoplay muted style=""width:100%; height:100%;"">
| <source src=""_ПутьКВидео_"" type=""video/mp4"">
| Ваш браузер не поддерживает видео HTML5.
| </video>
|</body>
|</html>";
ПутьКФайлу = "file:///C:/Video/promo.mp4"; // Используем протокол file:///
ТекстHTML = СтрЗаменить(ШаблонВидео, "_ПутьКВидео_", ПутьКФайлу);
Обратите внимание: Для автоматического запуска видео (autoplay) современные браузерные движки требуют наличия атрибута muted (без звука). Без этого параметра политика безопасности WebKit может заблокировать автоматическое воспроизведение.
Часто возникает ситуация: вы меняете строку в реквизите ТекстHTML, но в поле на форме ничего не происходит или остается старое изображение. Это связано с тем, что движок оптимизирует рендеринг и не всегда видит изменения в DOM-дереве. Выясним причину и найдем решение.
Чтобы принудительно обновить содержимое, мы можем использовать метод ВыполнитьScript(). Разберем, как заставить страницу перезагрузиться программно:
&НаКлиенте
Процедура ОбновитьВидео()
// Сначала меняем данные
ТекстHTML = СформироватьНовыйHTML();
// Затем даем команду движку на обновление
Элементы.ПолеHTMLВидео.ВыполнитьScript("location.reload();");
КонецПроцедуры
Если вам нужно плавно переключить видео без перезагрузки всей страницы, лучше использовать JavaScript для прямой смены атрибута src у элемента video:
&НаКлиенте
Процедура СменитьРолик(НовыйПуть)
Скрипт = "
|var v = document.getElementById('player');
|v.src = '" + НовыйПуть + "';
|v.load();
|v.play();";
Элементы.ПолеHTMLВидео.ВыполнитьScript(Скрипт);
КонецПроцедуры
При работе в среде WebKit важно учитывать следующие технические нюансы:
.mp4 с видеокодеком H.264 и аудиокодеком AAC. Также отличную совместимость показывает формат .webm.file:///, а все обратные слэши \ должны быть заменены на прямые /.ПоляHTMLДокумента, используйте CSS-свойство object-fit: cover; или contain; внутри тега style.Рассмотрим пример продвинутого управления через MediaSource. Если ваша задача — создать бесшовную очередь воспроизведения рекламных роликов (как упоминалось в обсуждении), рекомендуется использовать событие JS ended. Это позволит 1С узнать, когда видео закончилось, и подгрузить следующее.
<script>
var video = document.getElementById('player');
video.onended = function() {
// Вызываем событие 1С или переходим на спец. URL для перехвата
location.href = "e1c:NextVideo";
};
</script>
В самой 1С это событие можно перехватить в обработчике ПриНажатии (проверяя ДанныеСобытия) или через специализированные механизмы расширения ПоляHTMLДокумента. Таким образом, мы получаем полноценную систему управления медиа-контентом внутри управляемого интерфейса.
Подводя итог, можно сказать, что переход на WebKit расширяет возможности 1С по работе с мультимедиа, делая интерфейсы более динамичными и современными. Главное — правильно использовать связку HTML5 и методов исполнения скриптов платформы.