home

Создание шапки сайта для Библиотеки ELiS c видео в качестве фона

video_header.jpg

В 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>
</body>
</html>

Здесь у нас на самом деле два видео, одно закодировано кодеком AV1, а другое в H.264. Сделано это потому, что AV1 будет при том же качестве в два раза меньше H.264, что ускорит загрузку страницы и старт отображения видео, но AV1 поддерживается не всеми браузерами.

Пока видео не отобразилось, его заменит картинка poster.jpg, лучше всего чтобы она была первым кадром видео.

При подготовке видео стоит иметь в виду, что файл видео не должен быть слишком большим, желательно не больше 1 МБайта, чтобы не слишком долго загружался и надо учитывать, что хотя высота фиксирована в 144 пиксела, у пользователей может быть разная ширина экрана.

Скачать исходники примера можно здесь: https://demo.elibsystem.ru/node/37627, вам надо будет распаковать ZIP-архив и в нём подменить видео на собственное.