20 лет профессионально
разрабатываем сайты в РФ
разрабатываем сайты в РФ
Использование полноэкранного видео в качестве фона сайта быстро набирает популярность. Скорость Интернет-соединения растет, браузерные технологии развиваются, а простота захвата видео высокой четкости побуждает к действию.
Поскольку данная тенденция приобрела большое количество поклонников, нам хотелось бы дать вам несколько советов по созданию собственного фонового видео. Конечно, не каждому проекту использование видео в качестве фона сайта идет на пользу, поскольку нагрузка на сервер все-таки высока. Тем не менее, при грамотном планировании в паре с тщательным вниманием к деталям, полноэкранное фоновое видео может быть огромным преимуществом в плане дизайна и брендинга.
Лучше всего, если видео и текст страницы будут сильно контрастировать. Простое правило: осветляйте текст при помощи темного видео или затемняйте текст при помощи более светлого видео. Хорошим примером является сайт Coulee Creative. В шапке сайта вы найдете небольшую навигационную панель, а также кое-какой вводный текст.
Видео переключается между различными сценами, но каждая из них выглядит несколько затемненной. Этот эффект создается с помощью наложения сетки повторяющихся черных точек. Если посмотреть пристальнее, то можно заметить повторяющийся узор на верхней части видео. Хотя этот метод не является стопроцентно надежным, он действительно работает и результат выглядит просто фантастически.
Видео можно отредактировать при помощи таких программ, как Premiere Pro или Adobe After Effects, однако не все дизайнеры имеют опыт такой работы.
Видео, установленное на авто-воспроизведение, зачастую обладает одним значительным недостатком – громким звуком. Множество пользователей немедленно закрывают страницу при первых же звуках непрошенного шума. Ведь это то, чего они никак не ожидали, а следовательно, нечто раздражающее и нежелательное.
Для воспроизведения встроенного видео на странице, нужно кликнуть по нему мышью. В этом случае, человек может решать: посмотреть видео или нет. Фоновое видео установлено на автоматическое воспроизведение и это абсолютно нормально. Но есть причина, по которой звук у него должен быть отключен. Люди, серфящие в Интернете, часто слушают музыку. Когда посторонний звук появляется словно из ниоткуда, он вызывает короткий шок или сильное раздражение.
Даже если вы предполагаете, что у большинства посетителей вашего сайта колонки будут выключены, стоит ли так рисковать? Поступите правильно и отключите звук у фонового видео. В конечно счете, вы и ваши посетители будете этому рады.
Не каждое фоновое видео должно быть полноэкранным. Бывает, что лучше сделать так, чтобы оно занимало лишь часть экрана. Жестких требований к размеру фонового видео не существует. Даже при том, что в большинстве случаев оно охватывать всю ширину страницы, нет никаких причин, по которым вы были бы обязаны следовать этой идеологии. Ищите, какие размеры видео лучше работают для каждого вашего проекта.
Фоновое видео чаще всего размещается на странице при помощи тега div. Содержимое страницы при этом выглядит естественно и прокручивается, как обычный контент. Но некоторые дизайнеры пытаются создать эффект параллакса, при котором фоновый контент сдвигается по мере того, как вы прокручиваете страницу вниз.
Для применения эффекта параллакса к заднему фону, должны использоваться специфические методы. Безусловно, требуется индивидуальный подход или использование комбинации плагинов.
Что можно сделать, чтобы гарантировать совместимость фонового видео с браузерами? Если у вас есть трафик-аналитик, то его услуги могут оказаться в данном случае весьма полезными. Отследите, какие браузеры чаще всего используются для доступа к вашему сайту, и посмотрите, какой формат видео они поддерживают. Пожалуй, флэш-видео является наилучшим вариантом для устаревших версий Firefox и IE.
В основном же, есть смысл нацелиться на более широко поддерживаемые кодеки и видео-контейнеры. H.264/MP4 и VP9/WEBM, по всей видимости, являются самыми популярными вариантами. Еще одна важная деталь, о которой следует помнить, это размер файла. Видео с разрешением 1080p может выглядеть потрясающе на большом экране. Но стоит ли заставлять ждать загрузки видео, размер которого составляет сотни мегабайт, тех посетителей, которые используют ноутбук с диагональю экрана 13 дюймов?
В отличие от традиционных фоновых изображений в формате JPEG, видео имеет более естественный метод масштабирования. Даже при уменьшенном размере файла ваше видео будет выглядеть по-прежнему чертовски хорошо. Так что для юзабилити фонового видео двумя наиболее важными принципами являются правильный тип файла и его небольшой размер.
Если вы не хотите изобретать колесо, самостоятельно внедряя фоновое видео в код сайта (в этом случае, желаем вам удачи и рекомендуем прикупить упаковку Red Bull), то инвестирование в плагин позволит уменьшить время кодирования и побережет ваше артериальное давление.
Так как фоновое видео пока еще является новинкой, вам не придется выбирать из множества вариантов. Есть некоторые отличные варианты с JavaScript, а также кое-какие WordPress плагины, которые помогут вам сделать всю необходимую работу.
Если вам нужен источник видео для использования в качестве фона сайта, загляните в категорию видеофайлов на VideoHive. В настоящее время они располагают библиотекй из более чем 90 000 видео!
Тенденция полноэкранных фонов глубоко укоренилась мире современного веб-дизайна. И хотя фоновые изображения по-прежнему являются самым распространенным вариантом, фоновые видео становятся все более популярными, благодаря обширной поддержке и простым методам реализации.
