Видео фон для сайта: следует ли использовать?

От автора: нам написал читатель: «Я уже видел очень красивые сайты с видео фоном, но в интернете крайне трудно найти хоть какую-нибудь статью о самых лучших практиках в этом направлении. Я пытаюсь отговаривать клиентов от фонового видео для сайта, даже если с ними сложно спорить. Ведь это выглядит круто, если все сделать правильно. «Взгляни на сайт моего конкурента, у него есть фоновое видео! Значит, и ты сможешь!!», говорят клиенты. Проблема, с которой мне пришлось столкнуться, заключается в том, что заказчик присылал видео или ужасное/низкокачественное, или размер файла был настолько огромен, что пользователи не дожидались загрузки и уходили с этого сайта без оглядки.»

Это «просто тренд»?

Мне не кажется, что видео это тенденция, а вот видео на весь экран на домашней странице с белым текстом поверх него – вот это тренд. Ни то, чтобы это было плохо. Вместо слова тренд можно произносить «быть в моде», а люди склонны доверять модным направлениям.

Данный тренд хотя бы длится уже несколько лет. Постам типа «60 красивых примеров веб-сайтов с полномасштабным фоновым видео» уже больше трех лет (насколько я могу судить). А люди на что-то вышедшее из моды, как правило, закатывают глаза.

Иногда тенденции положительно сказываются на результате. С первого взгляда ненужное исследование показало, что тренд параллакс прокрутки не оказывает негативного влияния на юзабилити, удовольствие, удовлетворение и визуальную привлекательность сайта, но и забавляет пользователей. Это было неожиданно, по крайней мере, для меня.

Сочетается ли фоновое видео с моим брендом, планами и будущим видением сайта?

Запомните, это они нанимают вас. Можно привести классическую аналогию с водопроводчиком, которому вы не должны говорить, как устанавливать трубы. Вы наняли его, потому что он мастер. В нашем случае компания наняла вас, потому что вы эксперт в этой области. Это справедливо до тех пор, пока вы думаете «я сам скажу, какой кран я хотел бы установить».
И все же, если заказчик дал вам видео, которое не будет работать с остальной частью сайта, так дело не пойдет.

Видео это просто способ передачи, это не освобождает от необходимости придерживаться бренда. Должно ли видео подходить под цветовую палитру? Нужен ли звук? Видео должно быть частью сайта?

Видео со временем будет все более обыденным

Чем больше видео будет использоваться, тем быстрее оно будет развиваться. В Гарри Поттере движущиеся картинки в газетах не вызывали удивления, для них это было нормальным.

Качество должно быть запредельно высоким

И это не из-за размера файла, а из-за моих ожиданий от видео. Если вы хотите заставить меня смотреть видео, то оно должно быть потрясающим. Оно поможет мне быстрее и более осмысленно понять ваш замысел.

Всегда ли нужен автозапуск видео?

У людей сложилась четкая неприязнь к автозапуску видео. Я не проводил исследований, что бы сейчас такое говорить, однако я видел множество людей, которые начинают корчиться и ворчать, когда видео автоматически запускается.

Без звука

Автозапуск не так плох, когда у видео нет звука. И будем честными, такое видео сейчас в моде. Хотя для меня, когда я вижу видео с автозапуском, у меня это вызывает реакцию «вот блин, надо быстрее выключить» — мышечная память.

Производительность

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

Вы знаете, как не убить всю производительность вашего сайта? Есть множество исследований, и все говорят, что низкая производительность это плохо, плохо, плохо.

Может, стоит загружать видео после загрузки страницы? Воспользоваться техникой Mustard cut? Или может, просто показать хороший постер вместо видео? А может, можно сделать вот так…

Вы знаете еще какие-нибудь трюки? Встроить код напрямую в HTML? Экстремальное сжатие файла, или может, стриминг видео? Ограничить цветовую гамму до черно-белой? Наложить статичный шаблон (точки/линии), чтобы спрятать низкое качество необычным способом? Размытие?

Бюджет

У вас есть так называемый «бюджет производительности»? Это значит, что большое видео может вызвать проблемы в какой-либо другой части сайта в угоду себе. Вроде бы разумный подход. Очень распространенный подход, как тренд на простые страницы с призывом к какому-либо действию для перехода на другую страницу.

Нужны ли сторонние сервисы?

По моему опыту сервисы типа YouTube или Vimeo решают весь спектр болевых точек: от пропускной способности до кроссбраузерности. Вы проектируете плеер, который будет работать только под вашим дизайном или вам нужно более полное решение?

Будете ли вы измерять степень успеха?

Если фоновое видео это целый набор различных изменений в дизайне сайта, было бы хорошей идеей, настроить метрику таким образом, чтобы убедиться в том, что все внесенные изменения оказали положительный характер. Вы уже продумали план действий на случай, если видео отрицательно сказалось на вашем сайте?

Нужен код для полноэкранного видео?

Я скептически отношусь к вещам типа jQuery plugins. CSS – все что нужно, чтобы спозиционировать и растянуть в видео качестве фона. Dudley Storey решил эту проблему следующим образом:

video.fullscreen {

  position: fixed;

  top: 50%;

  left: 50%;

  min-width: 100%;

  min-height: 100%;

  width: auto;

  height: auto;

  z-index: -100;

  transform: translate(-50%, -50%);

}

В его демо есть небольшой бонус в виде паузы:

Его статья на эту тему покрывает пару других важных аспектов. Таких как, как спрятать видео на маленьких экранах (если хочется), или как работать с IE8.
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
							
							

Комментарии Вконтакте: