Работая с этим сайтом, вы даете своё согласие на использование файлов cookies. Это необходимо для нормального функционирования сайта, анализа трафика. Подробнее можно почитать в нашей Политике конфиденциальности

Используем фоновое видео на сайте правильно

Используем фоновое видео на сайте правильно

Фоновое видео на сайте в шапке сайта может выглядеть очень эффектно, привлечь внимание, передать идею и, возможно, повлиять на пользователя позитивно.

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

Чтобы убедиться в правильности своего видео, я подготовил некоторые рекомендации которые призваны улучшить результат и дать максимальный эффект. Я не буду сейчас советовать как снимать и какое именно ставить видео для той или иной ситуации, я не дизайнер, но есть некоторый набор правил, который всё же стоит учесть.

Общие правила

Видео должно быть коротким

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

Видео должно быть секунд 10-15, этого вполне достаточно чтобы передать задуманную идею или выразить нужную эмоциональную составляющую. Конечно, если не брать во внимание потоковое видео с видеосервисов, например как YouTube. Ведь если оставить формат видео ролика на уровне HD, с ютуба видео начинает воспроизводиться практически мгновенно.

Чем меньше движения, тем лучше

Резкие движения в ролике могут отвлекать пользователя от основного контента, чрезмерное движение в ролике нежелательны. Просто стоит учесть тот фактор — фоновое видео на то и фоновое, что служит для заполнения заднего плана и усиления внимание на переднем. Это лишь визуальная поддержка для усиления основной информации.

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

Высокое качество видео

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

Удаление звукового канала

Во-первых, аудио дорожка в видео может быть отвлекающим фактором. Во-вторых, не дело, если пользователь открыл сайт и у него в колонках, которые включены на всю громкость, начнёт, хоть и офигенно, петь Кипелов «Я свободен»... В третьих, если у фонового видео есть аудио-дорожка не сработает автозапуск на мобильном телефоне, а для современных сайтов, на которые чуть ли не 50% пользователей заходит с мобильных устройств, это минус в карму. Так что не забывай вырезать аудио-дорожку.

Конвертация и оптимизация видео

Форматы видео для интернета

Для того, чтобы фоновое видео было кроссбраузерным его нужно преобразовать в несколько форматов, на данный момент это WebM и MP4. Если поискать в интернете наилучший вариант конвертации видео — это ffmpeg, который работает через командную строку. Но не стоит заморачиваться с командной строкой, можно использовать онлайн конверторы, коих сотни на просторах интернета, да и некоторые редакторы видео прекрасно справляются с задачей сохранения видео для веба.

Достаточно HD качества

Как я уже писал, для фонового ролика HD качества (1280х720) хватает с лихвой без потери в качестве на любом мониторе. Если твой ролик более высокого качества, стоит его сжать. Ещё один параметр, на который следует обратить внимание при экспорте видео — битрейт. Чем ниже битрейт, тем ниже его «вес», но в этом случае теряется качество. Соответственно высокий битрейт прибавит в весе и в качестве. Идеальный битрейт где-то по середине между 700kb/s и 1200kb/s. Стоит с ним поиграться, чтобы сохранить и качество и не прибавлять, в пустую, в весе. Фоновое видео не должно быть супер-качественное, оно должно быть приемлемое.

Фоновое видео на мобильном

Видео, как правило, это большой объём данных, они потребляют больше ресурсов, замедляет общее время полной загрузки страницы. Поэтому специально для пользователей мобильных устройств стоит рассмотреть использование медиа запросов, чтобы этим пользователя показывать видео с меньшим битрейтом и размером. Это существенно снизит его вес. На телефоне, не особо заметна разница размера кадра между 720 и 360. Поэтому для мобильных устройств видео в формате 640х360 будет вполне достаточно. 

Если ещё один вариант, показывать пользователем стандартную статический картинку, без воспроизведения фонового видео. Вес картинки размером 640x360px в десятки, если не сотни раз ниже видео в HD качестве.

Оптимальная контрастность

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

Возможность паузы

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

Кстати, есть такая штука как WCAG (Web Content Accessibility Guidelines), это рекомендации, не правила, хотелось бы это ещё раз подчеркнуть. Так вот, в пункте «2.2.2. Пауза, остановка, скрытие» написано:

Для любой движущейся, мигающей или прокручивающиеся информации, которая (1) запускается автоматически, (2) длиться более пяти секунд, (3) представленная параллельно с другим контентом, должны существовать для пользователя механизмы, чтобы приостановить, остановить, скрыть...

Относить фоновое видео к этому пункту или нет суди сам, данный вопрос сугубо индивидуален.

Вывод

А вывода из всего выше написанного я делать не буду, делай его сам. Лишь озвучу своё мнение. Я считаю, что фоновое видео довольно хорошо использовать, например, на сайтах-визитках или крупных статьях на 10-15 тысяч знаков, в которых можно и почитать и посмотреть. Но вот везде его лепить не нужно, считая, что это круто. Стоит соблюдать баланс между нужно и лишь бы сделать.


Вверх
Войти на сайт
или

Восстановить пароль Регистрация