Видео в интернете с годами становится все лучше и лучше по качеству. Соответственно, что все люди хотят больше видеть такие видеоролики или даже полнометражные фильмы. И как следствие, использование видео в веб-дизайне позволяет посетителям прикоснуться к магии синематики, ощутить некую интерактивность, погрузиться в атмосферу тематики проекта. Более того, если видео дополнительно имеет небольшой сюжет, быстро загружается и по времени непродолжительное, то его пересматривают, и пересматривают, а порой стараются и локально сохранить. Магия видео позволяет завладеть вниманием пользователя и удержать его на странице сайта гораздо дольше, чем статическая фотография. Хотя с «ожившими» фотками и с эффектом параллакса еще можно поспорить… и очень сильно.
Но если рассмотреть некоторые работы известных и не очень веб-мастеров, которые оснащают дизайн сайта видеоматериалами, можно заметить, что они используют видео очень высокого качества. Редко, да. Иногда его только предлагают загрузить отдельно, но… создают и используют. Почему же и нужно ли оно?
Высокие разрешения
Высокое разрешение для видео обязательно в веб-дизайне. Картинка на мониторах 1080р становится более четкой и красивой, а посетителям приятно смотреть. Вспомните, сколько раз открывая то или иное видео на YouTube, вы старались сразу изменить разрешение с 360р на 720 или 1080. Видеть на сайте размытое пикселеобразное "месиво" мало кому хочется. Но между тем, как в большинстве случаев пользователи обладают мониторами с разрешением 1080р, видео создается и в 4К. Более того, даже флагманские смартфоны позволяют такое видео снимать.
Так в чем секрет его и особенность?
Все что нужно знать о 4К видео: это видеоролик с очень, очень суперским качеством. Вот наглядный пример: Zion National Park. Autumn. Посмотрите в разрешении 1080р, выберите момент, поставьте паузу и смените качество на 2160 (4К). Вы заметите, что этот момент уже при стоп-кадре стал более и более четким. Это потрясающе красиво! И это – почти в четыре раза больше чем обычный Full HD TV.
Высокое разрешение это большое количество пикселей по горизонтали, а потому на изображении появляется большая детализация. UHDTV 4К стал уже стандартом для цифрового кино и компьютерной графики и это самое высокое разрешение на сегодняшний день на потребительском рынке. И да, его поддерживает YouTube, и многие компании создают такое качественное видео, достаточно в поиске видеосервиса написать «4К».
Видео Full HD и выше в веб-дизайне
Как мы неоднократно говорили, использование видео в веб-дизайне – одна из основных тенденций в течение последних нескольких лет. Видео буквально «взорвало» представление о том, каким должен быть сайт, заменив собой статические и, порой, такие скучные, изображения. Видео способно рассказывать историю, за которой посетители любят наблюдать; их манит загадочность и ожидание момента: «а что дальше?» Аналогично работают и изображения с параллакс эффектом, так как смотря на них, всегда невольно задумываешься: «а вдруг еще что-то появится».
Используется ли в веб-дизайне стандартное разрешение видео или ультра-современное 4К, но веб-дизайнеры применяют его для: области заголовка, фона, отдельных фрагментов по тематике.
Blizzard используют видео в заглавии страницы и представляют 30 секунд обзора нового дополнения в формате Full HD.
Проект Storq использует видео в качестве демонстрации стилистического набора одежды для беременных. Если открыть видео отдельно, то можно увидеть, что в оригинале оно имеет весьма немаленькое разрешение. Поскольку же его используют в небольшом размере секции, то визуально качество получается очень высоким. Но дизайн сайта подстраивается под размер окна браузера, поэтому видео также расширяется.
На сайте видеостудии Oxen Made также используется много видео и в качестве фона и в качестве инфоблоков. При этом дизайнеры предлагают нажать присмотр видео отдельно и тут появляется возможность увидеть невероятные красоты 4К, если нажать выбор качества.
Интерес представляет и сайт Coffee Times Coffee. В первом фоновом видео легко заменить, что дизайнеры использовали видеоряд не самого лучшего качества. Впрочем, оно и понятно. Зато если пролистать страницу ниже, то здесь уже представители компании решили показать процесс подготовки кофейных зерен к употреблению. Доступно такое познавательное видео в качестве 1080р.
Независимая кинокомпания Das Department, занимающаяся созданием художественных, телевизионных фильмов, видеорекламы и пр. также представляет огромное количество видеороликов своих проектов. При этом если у вас разрешение экрана большое, то окно плеера подстраивается под него вплоть до…4К. Заглавное видео можно также увидеть в 4К, но отдельно, если кликнуть по иконке треугольника «Play».
Металлоинвест демонстрирует свои достижения и области деятельности в серии познавательных видеофильмов, продолжительностью около четырех минут. Каждое из них имеет максимальное качество 1080р.
Аналогично используют видео в Full HD и 4К и даже 2К проекты Doubleeight, Standard Films, Gbr Design, The Beekman. При этом изначально в браузере загружается малая версия видео и только при развертывании на весь экран или при большом разрешении монитора можно увидеть детализацию и контраст в видеоролике.
Форматы видео
Изначально, открывая тот или иной сайт, невозможно сказать какое качество видео используется. Мы видим в любом браузере среднее и только в зависимости от разрешения экрана монитора и пропускной способности интернета загружается файл с высоким качеством. Но если детально посмотреть код страницы (в браузерах это вполне возможно, кликнув ПКМ), то можно увидеть интересную особенность.
Кроме того, что многие сайты дублируют изображения формата JPG в WEBP (мы о нем подробно рассказывали ранее), аналогичный дубляж происходит и для видео. Форматы файлов используются и MP4 и WEBM.
Что это формат и почему именно он?
Это аналог формата WebP, только работает он не с изображениями, а с видео. Создали его Google в 2010 году (даже чуть раньше), и представляет он собой замену стандартам H.264/AVC и H.265/HEVC. На текущий момент он поддерживается всеми существующими браузерами, даже IE. Удобен же тем, что значительно сокращает размер видеофайла, а поскольку видео используются не слишком маленькие по времени и размеру файла, то его использование более чем оправдано.
Например, видео проекта Storq представлено в двух вариантах. В MP4 оно весит почти 5 МБ, а WebM – 3 МБ. То есть, почти в два раза меньше. Если вы сравните качество обоих вариантов видеоряда, то они не отличаются.
От создания до использования
Какой бы заманчивой не была идея использовать видео в веб-дизайне, будь то 4К или обычное 1080р, создавать его самостоятельно не всегда возможно. Скорее даже – почти нереально. Хорошо, если какие-то наработки есть у заказчика, можно поработать с ними, как в случае с фотографиями. Но, если нет...
В интернете можно найти огромное количество библиотек с бесплатными видео в 4К формате разной тематики и разной продолжительности. Все видео собираются не один год и предварительно просматриваются админами проектов, поэтому найти здесь что-то «запрещенное» или «отвратительное» будет сложно.
iStock – коллекция видео высокого разрешения, B-roll кадры (те кадры и вклейки, что скрывают монтаж основного видео) и даже футажи (необработанное видео, реальная съёмка без редактирования, монтажа). Все клипы можно загрузить, затем редактировать при необходимости и использовать на сайтах. Тематика почти безгранична.
Videvo – огромная библиотека видеофайлов в высоком разрешении. Также имеется анимированная графика, футажи, 4К, даже видео на зеленом фоне. Библиотека бесплатная, но не стоит забывать о сортировке, где в параметре Resolution можно выбрать разрешение видео от 720р до 4К.
Videezy – еще одна подборка больших и детализированных видеороликов. Опять же, в свободном доступе.
VideoBlocks – не меньшая подборка видео, футажей и пр., но для загрузки чего-либо требуется регистрация.
Подводные камни
Вот мы рассмотрели моменты, как хорошо использовать видео высокого разрешения, 1080р или 4К, на сайтах и какие они красивые. Но немного поразмыслив, возникает вопрос: «Почему в действительности так мало 4К на практике используется веб-дизайнерами?». Дело в том, что файл с 4K UHDTV видео имеет размер гораздо больший, чем его аналог в 1080 или 720. Если же посмотреть большинство сайтов, то они используют даже меньше 720р и «растягивают» его по ширине/высоте принудительно. Это заметно ухудшает качество, но зато производительность сайта высокая.
Другой момент – создание. Веб-дизайн, сайт и видео в совокупности станут популярны и привлекут внимание посетителя, если будут друг другу соответствовать тематически. Но бывает и так, что подобрать бесплатное/платное видео сложно и долго, а то, что имеется у компании-заказчика, отснято в разрешении, например, 720р. Разумеется, что вручную изменить разрешение, перекодировать и добиться тем самым супер качества невозможно. Картинка все равно будет хуже, чем видео уже сразу созданное в том же 1080р. Иными словами, как с фотографией: если маленькую картинку увеличивать, качество будет ухудшаться.
Еще сложность в использовании – учет размещения элементов. Ширина окна видеоплеера разная при воспроизведении видео 4К и Full HD, а потому и элементы должны располагаться по-разному. Если в первом случае текст находится там, где на видео было светло, то при увеличении изображения (кадра) в этом месте может быть уже темнее, а светлая часть сдвинется. Соответственно, и текст должен быть сдвинут.
Поэтому-то 4К на сегодняшний момент явно не используется на сайтах, но оно поддерживается ими, создается и загружается в интернет или хранится на сервере сайта.
Зачем и почему?
Так или иначе, но спустя немного времени уже у большинства потребителей будут и телевизоры с 2К/4К разрешением и мониторы, а потому дизайн некоторых сайтов рано или поздно придется дорабатывать, адаптировать под эти разрешения. Но если 4K UHDTV (как и большие фотографии) уже будут храниться и прописаны в коде проекта, то они загрузятся автоматически и сайт обретет новые краски. Но это в том случае, если в CSS были четко описаны все варианты разрешения экрана и размещения всех элементов.
Вывод
Что нас ждет в будущем? 4K UHDTV и 2К QHD видео, рано или поздно, поглотят мир также, как сделали это ранее 720р и 1080р. А в качестве «супер-пупер» разрешения возможно появятся и еще большие, хотя уже не для потребителей, ибо физически разместить больший экран в офисах/домах будет для большинства трудновато.
Так или иначе, но использование видео высокого разрешения в веб-дизайне – это показатель вкуса и следования всему новому и прогрессивному в мире. Другой вопрос, как дизайнеры реализуют это. Предлагают отдельный просмотр 4К или загружают только его, а затем попросту уменьшают до 720р, например. Выбор остаётся за мастером, тем более, что благодаря разным форматам видеофайлов можно подобрать оптимальный размер.
Вот так, еще один элемент, который не так просто порой использовать, как кажется.