Фоновое видео на сайте

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

  • увеличивается скорость интернет соединения;
  • совершенствуются видеокодеки;
  • расширяется браузерная поддержка HTML5 видео.

Однако фоновое видео может повлечь за собой и некоторые негативные последствия в том случае, если его плохо реализовывать. О каких последствиях идет речь:

  • страница сайта может медленно загружаться;
  • пользователь будет постоянно отвлекаться от главного контента, размещенного на сайте;
  • на сайте будет слишком много движения и панорамирования, что только будет создавать негативно впечатление у гостя, оказавшегося на странице вашего сайта.

Что нужно делать, чтобы негативных последствий не возникло? Мы поделимся с вами некоторыми инструкциями, которые помогут вам настроить свой сайт таким образом, чтобы на нем качественно воспроизводилось фоновое видео, и сам сайт при этом нормально работал:

Сжимайте видео, насколько это возможно

Сожмите размер видеофайла максимально до оптимального битрейда. Если вы зашли на сайт, а фоновое видео на нем работает некорректно (спотыкается, например), то вы отвлекаетесь от него, создается впечатление, что весь сайт тормозит в работе, хотя главный его контент прогрузился полностью. Такое происходит, если вы, стремясь использовать высококачественное видео в разрешении 1080p, не учитываете, что от этого ухудшиться скорость загрузки видео, а стриминг будет постоянно прерываться. Лучше использовать видео 720p и несколько хаков для скрытия низкого качество медиаконтента.

Используйте наложение для скрытия артефактов

Чтобы скрыть дефекты видео, используйте слой-наложение, которое поможет вам замаскировать плохое качество. Просто добавьте спозиционированное div и псевдо-элемент ::after в контейнере видео. Примените к этому элементу свойство CSS pointer-events: none;. Это позволит вам дальше свободно управлять этим видео без ограничений. Можно сделать полупрозрачное наложение или в том цвете, в котором написан ваш сайт. Прежде, чем его установить окончательно, просмотрите, как оно будет смотреться, с помощью демо-версии.

Ограничивайте общий размер и длину видео

Измените размер и длительность видео (эти параметры лучше ограничить). Если вы это сделаете, что воспроизведение видео будет плавным, не возникнет пауз при просмотре сайт. Учтите, что посетители вашего сайта не стремятся просмотреть фоновое видео, которое вы используете. Пусть оно длится максимум 30 секунд и весит только 2 Мб. Такие видео можно присмотреть на видеостоках.

Избегайте чрезмерного движения

Следите за тем, чтобы на вашем видео было меньше движения, потому что оно должно быть фоновым, вспомогательным. Оно не может перекрывать основной контент вашего сайта и привлекать внимание. Видео должно быть плавным и спокойным. Никаких резких движений, отвлекающих внимания на нем не может быть.

Обеспечьте достаточный контраст для текста на переднем плане

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

Обеспечьте заполнение фоном всего контейнера

Весь контейнер должен быть заполнен фоном. Вы, наверняка, знакомы с таким понятием, как background-size. Это свойство, благодаря которому можно сделать так, чтобы фоновое пространство было заполнено полностью, и при этом отображалось качественно. Есть также такое понятие, как object-fit. Благодаря этому свойству вы можете заполнять все фоновое пространство посредством видео. Так как это свойство пока работает с перебоями, лучше использовать полифилл или JavaScript, чтобы устанавливать фоновое видео.

Адаптируйте для разных устройств

Сделайте так, чтобы ваше фоновое видео было адаптировано под любые устройства, особенно под мобильные телефоны. Дело в том, что iOS отключает автовоспроизведение фонового видео, превращая его в мизерную иконку. Только после нажатия на эту иконку, можно просмотреть фоновое видео на мобильном устройстве. Поэтому продумывайте запасной вариант дизайна, в котором на фоне будет не видео, а обычное изображение, которое на телефоне будет смотреться гораздо лучше, чем видео.

Не зацикливайте видео навсегда

Не стоит устанавливать одно фоновое видео навсегда, поэтому уберите такой атрибут, когда будете вставлять видео, как loop. Если вы этого не сделаете, тогда браузер будет воспроизводить фоновое видео до тех пор, пока вы не закроете вкладку, а все это отразится на производительности всей страницы сайта в целом. Лучше вместо любого плана атрибутов написать код JavaScript. Он будет останавливать воспроизведение фонового видео по таймеру, который вы прикрепите к сайту. Он будет срабатывать в тот момент, когда пользователь нажмет на правую кнопку мышки.

Добавьте кнопку паузы

Обязательно установите на фоновое видео кнопку «пауза». Посетители, которые зайдут на ваш сайт, и захотят сразу же отключить фоновое видео, должны иметь такую возможность, нажав на паузу. Если такой возможности вы для них не предусмотрите, то они просто покинут ваш сайт и не станут углубляться в суть предложения, которое вы делаете на своей странице. Кнопка «пауза» добавляется благодаря JavaScript. Если же вы будете использовать jQuery Background Video, то эта кнопка появиться автоматически. Вам нужно будет только подобрать для нее интересный дизайн.

Предусмотрите затухание

Сделайте так, чтобы ваше фоновое видео могло затухать, чтобы у посетителя не создавалось впечатления, что вы ему что-то хотите навязать. Чтобы его ничего не отвлекало, попробуйте добавить в ваше видео эффект затухания при паузе видео, особенно в том случае, если изображение имеет более высокое качество, чем видео. Это можно сделать в плагине jQuery Background Video таким образом:

  • добавить изображение в качестве фона для элемента, содержащего <video;
  • задать видео прозрачность 0 по умолчанию (1 в тот момент, когда видео начнет воспроизводиться);
  • добавить CSS-переход свойства прозрачности.
54.80.87.166
http%3A%2F%2Fblog.ctweb.ru%2Ffonovoe-video-na-sayte%2F