В ELiS можно подставлять в качестве шапки сайта произвольный HTML-код. Поверх него можно накладывать логотипы ссылки.
Встаёт вопрос, каким образом обеспечить анимацию в шапке сайта средствами HTML.
Вариантов может быть несколько, например с помощью JavaScript и Canvas фон сгенерировать или отрисовать: https://demo.elibsystem.ru/node/37614.
Это достаточно сложные варианты, для которых надо найти или что-то готовое с подходящей лицензией или создать самим с привлечением программиста.
Другой вариант, под который проще найти специалистов, это создать видео. Для видео проще найти видеоредактора, который сможет вам помочь.
Пример видео: https://demo.elibsystem.ru/node/37627. Об этом примере и пойдёт дальше речь.
Как сделать шапку сайта с фоном из видео[править]
В целом всё просто: вы создаёте видео с высотой 144 пикселя и большой шириной (например 1920 пикселей), создаете веб-страницу index.html и на ней встраиваете видео, скрыв все элементы управления и настраивая автостарт самого видео.
Дальше загружаете на сервер в публичную папку sites/default/files/<video_header_folder> и в каталоге или документе, для которых хотите установить в шапку видео, в параметрах поля elis_config указываете применение вашей веб-страницы в качестве URL шапки сайта:
{
"chromeColor":"#770044",
"textColor":"#FFFFFF",
"headerUrl":"https://elis.example.com/sites/default/files/<video_header_folder>/index.html",
"logoPrimaryUrl":"https://elis.example.com/sites/default/files/logo.png",
"logoPrimaryHref":"https://elis.example.com"
}
Технически на этом всё. Но стоит подробнее дать рекомендации как видео готовить и как создавать веб-страницу.
Пример веб-страницы для встраивания видео в качестве шапки сайта[править]
В файле index.html может быть примерно такой код:
<!doctype html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=UTF-8">
<style>
html, body, video {
margin: 0; padding: 0; overflow:hidden; width: 100%; height: 100%; background: #770044;
}
video {
object-fit: fill;
}
</style>
</head>
<body>
<video autoplay muted controlslist="nodownload nofullscreen noremoteplayback" poster="poster.jpg">
<source src="video.av1.mp4" type="video/mp4; codecs=av01.0.05M.08,opus" />
<source src="video.h264.mp4" type="video/mp4; codecs=avc1.4D401E,mp4a.40.2" />
</video>
<script>
document.querySelector('video').playbackRate = 0.5;
if (navigator.userAgent.indexOf('Edge') > -1 || navigator.userAgent.indexOf('Trident') > -1) {
document.getElementsByTagName('video')[0].classList.add('hidden');
document.getElementsByTagName('img')[0].classList.remove('hidden');
}
</script>
</body>
</html>
Здесь у нас на самом деле два видео, одно закодировано кодеком AV1, а другое в H.264. Сделано это потому, что AV1 будет при том же качестве в два раза меньше H.264, что ускорит загрузку страницы и старт отображения видео, но AV1 поддерживается не всеми браузерами.
Пока видео не отобразилось, его заменит картинка poster.jpg, лучше всего чтобы она была первым кадром видео.
При подготовке видео стоит иметь в виду, что файл видео не должен быть слишком большим, желательно не больше 1 МБайта, чтобы не слишком долго загружался и надо учитывать, что хотя высота фиксирована в 144 пиксела, у пользователей может быть разная ширина экрана.
Скачать исходники примера можно здесь: https://demo.elibsystem.ru/node/37627, вам надо будет распаковать ZIP-архив и в нём подменить видео на собственное.