Фоновое видео на вашем сайте может стать отличным способом привлечения внимания посетителей вашего ресурса. Именно поэтому использование видеороликов в качестве элемента веб-дизайн становится все более и более популярным. И популярность этого визуального приема будет продолжать расти, так как поддержка HTML5-видео во всех современных браузерах приближается к тому, чтобы стать стандартной.

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

 

1) Сжатие видео для использования на ваших веб-сайтах

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

Таким образом, то, что должно быть приятной особенностью дизайна, позитивно влияющей на общее впечатление от веб-сайта, может стать неприятностью для его посетителей. Ведь им приходиться ждать, пока все необходимые элементы (включая сам видеоролик) полностью загрузятся и правильно отобразятся.

compress-web-design

Большие по размеру видеоролики не просто повышают общее время загрузки страниц. Они ведут к отрицательному пользовательскому опыту, особенно если посетитель впервые на вашем сайте, и он у него еще не кэширован. Кроме того, медленно загружающийся контент сайта негативно влияет на SEO вашего сайта, так как быстрое время загрузки страницы является важным фактором, который Google и другие поисковые системы принимают во внимание. Вот почему так необходимо сжимать видео перед их использованием на вашем веб-сайте.

 

2) Конвертация видео для HTML5

Вторая проблема связана с форматом видеороликов. Видеофайлы, которые вы получаете от коллег или создаете в наборах для редактирования видео, часто могут быть в формате, который может вызвать проблемы во время воспроизведения. Большинство браузеров (Chrome, Firefox, Edge, Opera, Internet Explorer, Safari и т. д.) без дополнительных плагинов могут воспроизводить только определенный набор форматов, видео- или аудиокодеков (если они в контейнере).

MP4 и WebM являются, пожалуй, наиболее распространенными форматами видео для использования в сети Интернет. Из-за возможных проблем с лицензированием MP4 лучше всего конвертировать видео в WebM (VP8). Однако в качестве альтернативы для браузеров, которые не поддерживают WebM, на веб-сайте все-же нужно оставить возможность получить видеоролик в формате MP4 (H264).

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

Оптимизация видео для веб-дизайна

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

Уменьшить размер файла можно также за счет уменьшения разрешения картинки и качества видео (увеличение уровня сжатия и уменьшение битрейта). Кроме того, важно выбрать широко распространенный видеоформат.

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

Фоновое видео – это зацикленный видеоролик, который отображается за прозрачными HTML5 слоями и/или текстовыми элементами, и он является лишь вспомогательным элементом дизайна. Этот элемент необходимо быстро загружать и воспроизводить на любом устройстве, которое ваши посетители используют для доступа к вашему сайту, независимо от того, какое у них подключение к сети Интернет.

Таким образом, размер видеофайла зависит от его разрешения, битрейта и видимого качества.

 

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

Наш сервис уже широко известен и популярен среди веб-дизайнеров, веб-разработчиков, графических дизайнеров, создателей WordPress, Wix и Squarespace сайтов. Он также был рекомендован в качестве полезного приложения многими блогерами веб-дизайна, а также визуальными платформами для создания веб-сайтов, такими как Webflow. Особый акцент делался на возможности сжатия видеороликов для использования их в качестве фонового видео или синемографа* на веб-сайтах.

 

compress-video-web-design

 

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

Для использования на веб-сайтах мы обычно рекомендуем сжимать видео по меньшей мере до разрешения 720p, используя при этом настройку среднего или низкого качества в Clipchamp. Мы предлагаем также пресеты настроек, оптимизированные под обычную (Web) или мобильную (Mobile) передачу данных. Пресет для мобильных устройств генерирует файл меньшего размера с несколько меньшим качеством, чем у файла, обработанного пресетом для проводной передачи данных.

Таким образом, лучшими настройками фоновых видео являются пресет Web, разрешение 720p, среднее качество, формат MP4 или WebM, или же пресет Mobile, разрешение 720p, среднее качество, формат MP4. Вы также можете самостоятельно комбинировать различные настройки Clipchamp, чтобы в результате получить видеоролик, параметры которого вас (и посетителей вашего веб-сайта) полностью удовлетворяют.

 

HTML5-background-video

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

 


*Не знаете, что такое синемограф? Здесь вы можете найти прекрасные примеры этого вида искусства.