Видео всегда являлось одним из самых мощных и эффективных способов визуального общения и коммуникации. Постоянный просмотр различных фильмов или же телевизионных программ привел к тому, что человечество уже не представляет свою повседневную жизнь без этих «движущихся картинок».
Изначально видео было направлено на обучение и развлечение пользователей, а сейчас оно все чаще используется для создания или поднятия эмоционального настроения посетителей сайта.
Совсем недавно в тренд вошло видео, воспроизводимое в качестве фона на веб-страницах в сети Интернет. В этой статье рассмотрим несколько важных аспектов при использовании фоновых видео роликов на сайте, а также познакомимся с несколькими расширениями Joomla, предлагающими нам такой функционал.
Содержание
- Стоит ли создавать фоновое видео?
- Достоинства и недостатки использования фонового видео на сайте
- Основные особенности использования фонового видео
- Источники видео-background’ов
- Примеры использования фоновых видео
- Расширения Joomla для создания фонового видео
- jQuery плагины для создания фонового видео
Стоит ли создавать фоновое видео?
Если вы собираетесь использовать у себя на сайте фоновое видео, главное, что нужно понимать – он не должен использоваться только потому, что это является модным и красивым. Расчет должен идти на ощущения пользователя, чтобы у него вызывались определенные эмоции. Использование видео большого разрешения (а для фона оно будет именно таким) значительно увеличивает размер web-страницы и несколько замедляет ее загрузку, поэтому важно четко понимать, насколько видео важно для сайта.
Достоинства и недостатки использования фонового видео на сайте
Давайте рассмотрим основные достоинства и недостатки использования фонового видео на сайте:
Достоинства использования фонового видео
- Человеческий мозг создан таким образом, что ему более привычны динамические процессы, происходящие вокруг, чем статические картинки, следовательно, фоновое видео оказывает на посетителей гораздо большее впечатление, чем статичные изображения.
- Как и любое творческое нововведение, фоновые видео файлы должны придать вашему сайту новый, современный дизайн и привлекать пользователей.
- Все мы понимаем величие и влияние кино. Видео дает нам некие инструменты редактирования, выбора времени и создания, которые могут помочь нам передать наши чувства стиля или образ бренда.
- В веб-сайтах в которых фокус сосредоточен на продуктах или услугах видео может использоваться, чтобы отобразить назначение продукта в реальном действии.
Недостатки использования фонового видео
- Фоновое видео можно разместить не на всех сайтах. Например, блоги, электронные журналы и новостные порталы вряд ли извлекут из него выгоду.
- Полноэкранное видео может отвлечь пользователя от основной задачи вашего веб-сайта, особенно, когда оно слишком красочно или перекрывает ключевые элементы страницы, например кнопки.
- Воспроизведение видео во многом зависит от факторов, которые не поддаются вашему контролю. Если у пользователя скорость подключения к сети Интернет низкая, то сайт может загружаться частями, а пользователь будет винить сайт в низкой скорости работы.
- Проблемы с воспроизведением видео могут повлиять на работу всего сайта – даже на те страницы, на которых видео не используется.
- Некоторые пользователи могут счесть присутствие оживленного фона тревожным знаком и не станут использовать сайт. Такое часто бывает, когда у пользователя лимитирован интернет-трафик.
Основные особенности использования фонового видео
Если вы все же решились использовать видео в качестве фона для сайта, то вот несколько общих советов.
Приглушите звук ролика
Обычно фоновое видео используется в режиме авто проигрывания, это означает, что оно начнется срезу же как только пользователь загрузит страницу, содержащую такой ролик. Хорошим тоном является уменьшение уровня звукового воспроизведения. Если же пользователь желает прослушать звук в полном объеме необходимо предусмотреть возможность выбора уровня громкости лично пользователю.
Ограничьте длительность воспроизведения видео
Другим аспектом, который вы обязательно должны учитывать, является время воспроизведения видео, которое, чаще всего, проигрывается по циклу. Как и с анимированным форматом GIF, короткие ролики могут вызывать раздражение у посетителей сайта, в то время как слишком затянутые файлы могут увеличить время загрузки страницы.
Выбор длины видео будет зависеть от каждого конкретного случая использования фонового видео, но постарайтесь следовать правилам хорошего тона, которые предусматривают использование видео со временем воспроизведения от 15 до 25 секунд.
Адаптивный дизайн для различных устройств
Никто не сомневается, что фоновое видео является популярным трендом, но при этом важно учитывать тот факт, что пользователи в сети используют разнообразные устройства для получения доступа к контенту. Не все устройства способны дать насладиться пользователю размещенными на сайте медиа материалами в полном объеме. Например, некоторые старые телефоны не могут воспроизводить видео в браузере вовсе.
Грамотный веб-мастер всегда просчитает все возможные сценарии и не допустит, чтобы пользователь видел пустой экран.
Даже когда кажется, что нет никаких ограничений на отображения видео со стороны пользователя, существует вероятность того, что что-то пойдет не так. Например, разрешение видео ролика может превышать максимально допустимое разрешение устройства пользователя или же пользователь может быть подключен к сети через низкоскоростной канал, когда воспроизведение происходит медленно, либо не осуществляется вовсе.
При создании фонового видео, как и при создании сайта в целом, всегда необходимо думать о балансе между качеством контента и полосой пропускания канала связи, при котором удобство использования сайта пользователями будет максимальным.
Источники видео-background’ов
Если все описанные выше сложности вас не останавливают, нужно задуматься над тем, где, собственно, взять видео подходящего для сайта формата. Если вы профессиональный видеооператор и видеоредактор – это не составит для вас труда, но что-то мне подсказывает, что это не так.
На сегодняшний день в сети существуют три крупных ресурса с большой коллекцией видеофайлов на все случаи жизни:
Все перечисленные сайты очень похожи друг на друга: каждый из них предлагает большое количество качественных видео файлов распределенных по тематикам: природа, люди, животные и др. полезные категории. Видео с низким разрешением предлагаются к бесплатному скачиванию и использованию, высококачественные ролики требуют оплаты.
Если же вы все-таки хотите попробовать создать видео для сайта самостоятельно, можете обратить внимание на видеоредактор Momavi (официальный сайт).
Примеры использования фоновых видео
Кто же использует в своей работе фоновые видео файлы? Давайте рассмотрим наиболее яркие примеры сайтов с применением фонового видео.
Я занимаюсь серфингом потому что…
Адрес сайта: http://www.isurfbecause.com
Этот веб-сайт является частью цифровой рекламной кампании BillaBong, которая решила использовать приведенное фоновое видео на своей домашней страничке, но не на всех остальных страницах сайта. Они решили сделать сайт более дружелюбным с точки зрения затрачиваемого времени на загрузку веб-страниц.
Очень хитрый ход с их стороны использовать точечный видео шаблон, что позволяет увеличить контраст текстовых сообщений на фоне изображения.
Как мы видим, кроме графики на главной странице нет ничего лишнего, что позволяет обратить особое внимание на мотивационные текстовые сообщения. Кроме того, веб-мастеру пришла в голову прекрасная идея относительно создания стоп-кадра на несколько мгновений, чтобы пользователи смогли насладиться акробатическими трюками на экране.
Просмотрев данную страницу, немногие смогут удержаться от желания научиться или хотя бы попытаться встать на доску.
Жизнь пи
Адрес сайта: http://www.lifeofpimovie.com/
Следующим примером является веб-сайт к фильму вышедшему на мировые экраны в 2012 году и получившему премию «Оскар» – «Жизнь Пи» Энга Ли. В отличие от других примеров, видео, используемое на странице, является кадром из реального фильма и используется для его рекламной компании.
Данные сайт был одним из самых ранних и ярких примеров использования фонового видео. Добавив музыкальное сопровождение к сценам фильма, веб-мастер создал ощущение присутствия зрителя в самой гуще событий, что вызывает чувства удивления и восхищения.
Однако при более детальном просмотре вы видите, что качество видео файла не очень высокое, некоторые кадры буквально размыты или же вообще находятся как «в тумане». Пожертвовав качеством, веб-мастер ускорил время загрузки файла.
PayPal
Адрес сайта: http://www.paypal.com
Еще одним примером является пожалуй один из самых известных и посещаемых сайтов в глобальной сети, количество пользователей которого никак не меньше нескольких тысяч ежедневно – это платежная система PayPal.
Компания онлайн-платежей решила следовать за тенденцией совсем недавно, и это полностью изменило пользовательский интерфейс сайта в лучшую сторону.
В данном случае видео используется, чтобы сделать акцент на основном девизе фирмы: “Мы здесь, там, где угодно”. В сценах видео показываются потенциальные клиенты системы PayPal, занимающихся бизнесом во всех уголках земного шара. Везде, где они могут полностью довериться PayPal.
Несмотря на использование видео, скорость загрузки сайта феноменально низкая, никаких задержек.
В данный момент сайт PayPal уже не использует видео на главной странице.
Расширения Joomla для создания фонового видео
Давайте рассмотрим расширения Joomla, используемые для создания фоновых видео для сайтов Joomla.
JUX Background Video
- Тип: Модуль
- Распространение: Коммерческое
- Страница расширения в JED: http://extensions.joomla.org/extensions/extension/style-a-design/page-background/jux-background-video
- Демо: http://demo.joomlaux.com/extensions/modules/bgvideo-fullscreen.html
Одним из наиболее популярных расширений, для создания фонового видео для сайта, является JUX Background Video. JUX Background Video представляет собой модуль предназначенный для Joomla 3.
Основные особенности JUX Background Video:
- Не имеет значения, под какой размер экрана Вы хотите подогнать видео, модуль все сделает за Вас.
- Вы можете установить уровень звука при воспроизведении по Вашему желанию, либо предоставить эту возможность пользователям сайта.
- Вам доступен выбор качества отображения видео – от низкого до самого высокого.
- Используя возможности механизма drag & drop, вы легко можете управлять загрузкой, упорядочиванием, просмотром или удалением видео файлов.
- Функция проигрывания файлов по заданному списку.
- Неограниченное воспроизведение видео файлов.
- Воспроизведение, как в полноэкранном режиме, так и в режиме частичного заполнения.
- Управление воспроизведением.
- Гибкие настройки отображения/скрытия.
- Легкая настройка оформления с поддержкой CSS.
- Поддержка популярных интернет-браузеров.
- Цветные шкалы воспроизведения и управления.
Aikon YouTube Background Video
- Тип: Модуль
- Распространение: Коммерческое
- Страница расширения в JED: http://extensions.joomla.org/extensions/extension/multimedia/multimedia-players/aikon-youtube-video-background
- Демо: https://www.aikoncms.com/demo/aikon-youtube-bg-video
Модуль Aikon YouTube Background Video предоставляет функции потокового воспроизведения и обещает практически нулевое время загрузки для полноразмерных видео файлов. Просто добавляйте свой текст, тени, изображения, заголовки чтобы получить законченный вид страницы веб-сайта.
Все необходимые настройки для работы модуля доступны в интерфейсе раздела администрирования. Они действительно очень просты и легки в понимании. С их помощью ничто не помешает Вам получить великолепный дизайн Вашего сайта.
Основные особенности
- Кнопки приостановки, проигрывания, уровня громкости видео.
- Возможность размещения видео на полный экран.
- Вставка модуля в материалы Joomla.
- Режим ограниченного размера видел.
- Опции затемнения для лучшей контрастности.
- Работает сразу после установки.
- Плавный скроллинг в браузере.
- Большое количество настроек отображения.
PRI Background
- Тип: Модуль
- Распространение: Свободное
- Страница расширения в JED: http://extensions.joomla.org/extensions/extension/style-a-design/page-background/pri-background
- Демо: http://demo.devpri.com/?product=pri_background
PRI Background – модуль Joomla, который позволяет добавить фон для сайта из изображений, слайдшоу или видео. Нас, в данном случае, интересует последнее.
Основные особенности PRI Background:
- Фон – изображение.
- Фон – случайное изображение.
- Фон – слайдшоу.
- Фон – видео.
- Фон – видео, размещенное на Youtube.
- Фон – видео, размещенное на Vimeo.
- Фиксированный фон / фон со скроллингом.
- Возможность использование локальных или удаленных файлов с видео и изображениями.
- Возможность включения / выключения звука.
Как видите, возможности PRI Background гораздо менее значительные, чем у его платных аналогов, также недоступна документация по модулю, но попробовать его все равно стоит.
jQuery плагины для создания фонового видео
Если вы web-разработчик, то для создания фонового видео на сайте вполне можете обойтись и без расширений Joomla. Перейдя по этой ссылке, вы сможете найти несколько плагинов jQuery, реализующих данный функционал для сайта. Останется только интегрировать один из них на ваш сайт.
В заключении хочу сказать – сайт с фоновым видео, несомненно, привлекателен. Но все же пока ограничения, которые накладывает использование данной технологии, весьма значительны. Применять или не применять фоновое видео у себя на сайте – решать вам.