От автора: за последние пару лет мы замечаем все больше и больше веб-сайтов с необычной дизайнерской особенностью – фоновым видео. С увеличением скорости интернета, улучшением видео кодеков и лучшей поддержкой браузерами HTML5 видео данный тренд будет только расти. В данной статье я Вам дам 10 советов как улучшить фоновое видео для сайта.
Если плохо подойти к разработке, фоновое видео может негативно сказаться на ощущениях пользователей. Сайт замедляется, и фоновое видео начинает отвлекать пользователя от основного контента. Если видео слишком широкое, это может запутать пользователя.
Тем не менее, если основательно подойти к этому вопросу, фоновые видео могут смотреться просто превосходно отлично. Тонкое дополнение к дизайну, оставляющее пелену задумчивости. Так как же избегать ошибок и делать все правильно? Очень просто, просто следуйте 10 советам.
Сжимайте видео как можно сильнее
Не может быть ничего хуже при посещении сайта, чем постоянные тормоза видео во время буферизации. Все это крайне отвлекает и оставляет ощущение, что тормозит весь сайт, даже когда тот загрузился полностью.
Во избежание таких проблем мы рекомендуем как можно сильнее сжимать видео до самого низкого приемлемого битрейта. Заманчиво было бы использовать видео высокого качества. Видеоролик 1080p смотрится прекрасно, но долгая загрузка и постоянные прерывания того не стоят.
На самом деле предпочтительно использовать 720p видео с низкой частотой кадров в 24/25 кадров в секунду. Перед выбором необходимо протестировать битрейт 750к и 1250к и выбрать подходящий для вас. Чуть позже мы расскажем о способах скрыть огрехи качества видео.
Используйте специальные слои чтобы скрыть артефакты
Если вы не довольны качеством видео или качество отличное, но оно не подходит для плавного стриминга, лучше поверх видео наложить специальный слой, который скроет недостатки. Сделать это можно очень легко, просто добавив абсолютно спозиционированный div прямо после ролика, или же можно для контейнера видео добавить псевдо-класс ::after.
Чтобы заблокировать возможность вызова контекстного меню правой кнопкой мыши, где можно остановить видео, к ролику необходимо добавить CSS свойство pointer-events: none;.
Монотонный цветовой фон и полупрозрачный слой для наложения только помогут и придадут видео очень хороший вид. Если же вы сможете совместить цвета видео с цветовой гаммой остального сайта, внешний вид станет еще лучше. Увидеть эффект режима наложения можно на странице демо с наложением шаблона на видео низкого качества.
Ограничьте максимальный размер и длину видео
Низкий битрейт видео поможет проигрывать видео гладко и без буферизации. Но нельзя думать, что пользователь приходит на наш сайт, дабы посмотреть фоновое видео. Пользователь может быть далеко не рад, когда его заставляют загружать двухминутное видео, которое может весить до 20Мб.
Максимальная длина видео, которое вы можете себе позволить, это 30-40 секунд. А еще лучше найти отлично зацикленное видео, которое будет казаться долгим, а весить всего лишь от 1-2Мб. На сайте BG Stock можно найти специальные плагины с хорошо зацикленными видео. Данный сайт помог мне найти множество фоновых видео.
Избегайте излишних движений в видео
Ключевое слово в словосочетании «фоновое видео» это «фоновое». Это очень четкое определение, видео дополняет основной контент, а не отвлекает от него внимание на себя. Чтобы пользователи не отвлекались от основной задачи сайта, фоновые видео должны быть очень короткими и плавными. А значит, стоит избегать быстрого видео, большого количества движений, слишком широких видео, тряски/нестабилизированных кадров, а также быстрых нарезок.
Обеспечьте хороший контраст видео с наложенным текстом
Если поверх вашего видео есть текст, необходимо убедиться, что он читаем. Если цвет текста совпадает с видео, вам понадобится добавить специальный слой, сменить цвет текста или добавить свойство text-shadow или фон.
Также стоит избегать излишней контрастности. К примеру, на рисунке ниже очень трудно расположить текст поверх кадра. На картинке присутствуют как светлые тона, так и темные, и текст будет совпадать с одним из них.
Видео должно занимать всю ширину своего контейнера
В CSS3 есть замечательное свойство ‘background-size’. У него есть значение ‘cover’. Данное свойство гарантирует, что фоновое изображение будет занимать всю доступную область контейнера. Ни больше ни меньше, сохраняя соотношение сторон.
Есть менее известное свойство ‘object-fit’, работающее с DOM схожим образом. Данное свойство можно использовать для полного заполнения контейнера видео роликом. К сожалению, на данный момент данное свойство плохо поддерживается в браузерах. А значит, лучше воспользоваться полифиллом или лично сымитировать поведение свойства с помощью JS.
По счастливой случайности есть простой JQuery плагин jQuery Background Video, который облегчит нам эту задачу. Дисклеймер: плагин написан мной.
Поддержка различных устройств
На данный момент фоновое видео плохо поддерживается на мобильных устройствах. iOS не поддерживает авто проигрывание видео и добавляет поверх ролика большую иконку плей, по нажатию на которую открывается медиа плеер.
На обычной странице вставка видео смотрится нормально, но это лишь дизайнерский штрих и видео не несет никакой критической информации. Так что лучше всего добавить фолбек в виде обычного фонового изображения. Фоновое видео на Android устройствах проигрывается также плохо. В обоих случаях лучше просто добавить сделать фолбек фоновым изображением.
Как это сделать – зависит от вас. Можно с помощью CSS медиа запросов скрывать видео на маленьких экранах. Также можно проверять браузер пользователя с помощью JS, и если это устройства Android/iOS, то просто удалять видео из разметки. В плагине jQuery Background Video последнее делается по умолчанию.
Не зацикливайте видео навечно
Если добавить к тегу видео атрибут ‘loop’, то браузер будет зацикливать видео до закрытия вкладки. Это сильно нагружает CPU и может замедлить всю страницу.
Также можно удалить атрибут цикла и проиграть видео один раз. Но в большинстве случаем наше видео будет коротким, и такой способ нам не подойдет. С помощью JavaScript можно написать пару строк и останавливать видео после Х секунд. Если видео останавливается вручную, необходимо просто сбросить таймер (в большинстве браузеров это можно сделать с помощью правой кнопки мыши). Как и в других JS плагинах, в jQuery Background Video можно вручную задать время ‘pause after’ в секундах.
Добавляйте кнопку паузы
Не важно насколько по вашему мнению хорошее фоновое видео, будут люди, которые захотят его остановить. Человек может чувствовать, что видео тормозит его компьютер, а также может думать, что видео никогда не остановится. С помощью JS можно легко добавить кнопку паузы. Но в jQuery Background Video данная кнопка отображается по умолчанию. Настроить стили и спозиционировать данную кнопку можно самостоятельно.
Добавьте плавное появление при старте видео
Запомните, фоновое видео должно быть еле заметным и не отвлекающим. Резкие движения при старте видео могут отвлечь пользователя. Хорошей идеей будет добавить плавное появление тега video при старте видео.
Можно сначала добавить фоновое изображение для тега video, задав прозрачность видео на ноль по умолчанию. Потом добавить CSS свойство transition и плавно изменять значение opacity с 0 до 1при старте видео. Если вы не хотите делать это самостоятельно, то jQuery Background Video сделал уже это за вас.
Также хорошо будет смотреться плавное затухание видео при нажатии на паузу. Особенно в случае если наш постер-заменитель видео лучшего качества чем видео.
Заключение
Фоновое видео на самом деле поможет выделить ваш веб-сайт среди массы других. Главное сделать это правильно. Следуйте этим 10 советам и вы будете на верном пути.
Автор: Angus Russell
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
