Проект Webdoors
Контакты
//Статья

Хотите видеофон для сайта?

Мода – вездесущее понятие, присущее любой сфере в той или иной степени. Также и в сфере создания сайтов время от времени появляются различные фишки, которые в короткое время заполняют умы разработчиков и внедряются повсеместно. Началось все, пожалуй, с использования gif-анимации и простых эффектов на Javascript. Лет десять назад, заходя на сайт, Ваш курсор обязательно сопровождали какие-то звездочки или снежинки, в том или ином месте появлялась примитивная, но милая рисованная мультипликация. По началу это забавляло, но потом начало раздражать и эти эффекты как по мановению руки исчезли с большинства страниц.

Далее, пожалуй, flash-анимация и все, что с ней связано. Может быть кто-то помнит прекрасные работы студии Пирогова, которая создавала сложные художественные решения с использованием этой технологии. Появилась целая индустрия создания flash-сайтов. Такие проекты заказывали для придания индивидуальности и интерактивности, которую не могла обеспечить связка html, css и js в те времена. Но большинству эра Flesh запомнилась, конечно же, расцветом баннерной рекламы. Безусловно, дело тут совсем не в самой технологии, но уже через совсем короткое время многие сайты превратились в “баннерные помойки”, от которых просто рябило в глазах… При этом многие из них не несли никакой полезности по своему содержанию. Кстати, до конца эта тенденция так и не ушла. Далее с легкой руки Стива Джобса Flesh стал потихоньку уходить из нашей жизни. Ему на смену пришел фреймворк Jquery, который сделал визуальные эффекты более функциональными и полезными. Появились и другие технологии, которые привели к тому образу современного сайта, который мы имеем сейчас.

Безусловно, Вы можете вспомнить и про бум социальных сетей, становление индустрии SEO и интернет-маркетинга, повальное появление интернет-магазинов, аукционов, продающих платформ-порталов, лендингов, адаптивности под мобильные устройства и многие другие тенденции. Но в контексте этой статьи хотелось бы поговорить об относительно новой тенденции в сфере дизайна - это появление видео в фоне сайта. Само по себе видео, конечно, не новость, первые ролики на Youtube заливали еще во времена динозавров. Естественно, все это вставлялось на сайты, что актуально и по сей день. Но с приходом HTML5 у нас появилась возможность интегрировать видео в качестве элемента дизайна без “танцев с бубном” стандартными средствами html и css.

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

Далее это, конечно же, производительность. Видео Full HD 1080p весом 10-20 мегабайт заставит Ваш сайт серьезно задуматься о жизни... Практика показывает, что идеальный вес видео будет в пределах 1-2 Мб. Для этого можно пожертвовать продолжительностью ролика, хватит и 10 секунд, ведь это только фон. При этом вполне неплохо будет смотреться видео 720p с битрейтом 700-1200 кб. В принципе, можно экспериментировать и с меньшими параметрами. Для скрытия артефактов качества на помощь придут дополнительные эффекты, накладываемые поверх видео средствами html и сss (например, мелкая сетка или цвет с прозрачностью для затемнения или осветления).

Следующий момент - частота отображения. Как по мне, одного фона на страницу вполне достаточно. И то, “генеральский эффект” стоит оставить только на главной странице сайта или на другой важной по замыслу странице. Ну, посудите сами, зачем показывать красоту там, где ее никто толком не увидит. Также с точки зрения психологии, если посетитель будет видеть все это на каждой странице, наступит привыкание, и эффект перестанет вызывать эмоции. А скорость загрузки при этом радовать не будет, ведь даже 1-2 Мб ролик будет ощутим особенно на слабом интернет соединении.

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

И, наверно, последний нюанс, который следует учитывать, если Вы хотите заказать сайт с видеофоном - это, конечно же, кроссбраузерность и форматы. Само собой стоит забыть про Internet Explorer 8 и тому подобные раритеты, не поддерживающие HTML5. Далее форматы. Они тоже имеют отношение к кроссбраузерности. Не вдаваясь в подробности, на сайте стоит разместить два дублирующих ролика в формате mp-4 (H.264) и Webm. Так Вы добьетесь отображения видео во всех популярных браузерах.

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

Закажите разработку сайта прямо сейчас

Контакты