Видеофон для сайта ремонт



Видеофон для сайта: инструкция по применению

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

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

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

Какие задачи решают фоновые видеоролики?

Фоновые видео эффективны, если вы хотите:

а) создать определенную атмосферу;

б) вызвать эмоции у посетителей;

в) наглядно продемонстрировать продукт или услугу.

Рассмотрим, как это реализуется на практике.

Пример 1. Атмосфера

Американское дизайн-агентство Grain and Mortar разместило на главной странице видео с зарисовками из повседневной жизни компании. Показан офис, рабочие моменты и отдых после работы, и сразу ощущается дружественная и креативная атмосфера:

Интересного эффекта добился с помощью видео калифорнийский дизайнер Fernando J. Maclen — он встроил размытое видео, на котором едва различим процесс его работы. Выглядит это стильно, и создается творческая атмосфера:

Пример 2. Эмоции

Британская клининговая компания Eagleclean использовала забавный прием: когда пользователь листает лендинг, появляется едва заметное пятно, которое «с той стороны экрана» начинает протирать сотрудник компании. Такое видео не несет какой-то смысловой нагрузки, а просто вызывает улыбку. Радостная эмоция повышает шансы на позитивное восприятие бренда:

Пример 3. Демонстрация

Демонстрировать можно что угодно — от товара и процесса оказания услуги до интерьера помещения. Так, нью-йоркский ресторан Vandal разместил видео элементов интерьера. Оно не только создает стильную атмосферу на сайте, но и показывает пользователям, куда они попадут, когда придут в ресторан:

Когда видео в качестве фона неуместны?

Видеофон не всегда эффективен. Например, он мешает, если вы хотите, чтобы аудитория сосредоточилась на конкретном контенте. Дело в том, что видео перетягивает на себя слишком много внимания, и оно может попросту отвлекать. Вот почему видеофон, как правило, не подходит, если у вас сложный сервис или продукт, который требует подробного объяснения.

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

А вот если разместить фоновое видео на промостранице конкретного товара, то это другое дело — пользователь «с порога» будет понимать, что ему предлагают, и увидит продукт в действии.

Запомните: фоновое видео должно быть уместным и улучшать пользовательский опыт. Если оно мешает — лучше откажитесь от него!

Откуда брать фоновые видеоролики?

Лучше всего, когда видео сделано на заказ или лично вами. Не стоит переживать по поводу качества картинки — особенно если вы будете накладывать фильтры. Зачастую достаточно снять ролик на смартфон и смонтировать его в бесплатном редакторе.

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

Вот некоторые бесплатные стоки:

  • wedistill.io (10 HD видео каждые 10 дней);
  • videos.pexels.com (огромная база бесплатных роликов);
  • ignitemotion.com (ресурс специализируется именно на бесплатных фоновых видео);
  • pixabay.com (есть русский язык);
  • free-hd-footage.com (есть 4К и 3D видео);
  • coverr.co (7 новых видео для главной страницы сайта каждый понедельник).

Среди платных стоков популярны такие:

  • videohive.net (от 10-20$ за ролик);
  • shutterstock.com‎ (от 49$ за ролик);
  • istockphoto.com (от 40-50$ за ролик).

Интеграция видео в качестве фона сайта: полезные советы

Наверняка вы хотите, чтобы фоновые видео работали в плюс. Вот несколько советов, которые помогут получить от них выгоду.

1. Используйте релевантные ролики

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

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

2. Убедитесь, что видеоряд не мешает просмотру контента

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

Добиться читабельности можно несколькими способами:

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

Читайте также:  Ремонт пылесоса робота кемерово

Фрагмент видеофона с сайта fitradio.com

2. Затемнение / осветление. Если вы используете яркий видеоролик с большим количеством деталей, он наверняка ухудшит читабельность контента, даже если вы используете правильный контрастный цвет. В этом случае «накройте» видео темным или светлым слоем. Это сделает его темнее или светлее и смягчит любые детали, которые затрудняют чтение.

Фрагмент затемненного видеофона с сайта isl.co

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

Фрагмент «цветного» видеофона (тема для сайта Ricca)

3. Используйте короткие сжатые ролики

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

Для ускорения загрузки:

  • используйте короткий ролик (5-10 секунд вполне достаточно) с функцией зацикливания — в этом случае видеоряд будет непрерывным;
  • сожмите видео, чтобы его размер не превышал 6 Мб (протестируйте качество картинки при различных значениях битрейта, разрешения и количества кадров в секунду, и выберите оптимальный вариант).

4. Размещайте видео без звука

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

5. Не показывайте элементы управления видеопотоком

Не стоит добавлять полосу прокрутки, кнопки «Play», «Pause» и «Stop». Вы используете видео в качестве фона, и эти элементы будут сбивать с толку. Если вы хотите донести какую-то важную информацию с помощью видео, добавьте на сайт полноценный проигрыватель, а фон пусть остается фоном.

6. Избегайте чрезмерной динамики

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

Заключение

Фоновый ролик — это только один пример использования видео для целей маркетинга. Это мелкий штрих, который наполняет сайт жизнью, создает ощущение глубины, привлекает внимание. Если же вы хотите использовать возможности видеомаркетинга по максимуму, одного фонового видео будет явно недостаточно. Необходимо создавать и развивать собственный канал на YouTube и размещать видео в соцсетях.

Также хорошо работает реклама на тематических YouTube-каналах у блогеров. На рекламной платформе Webartex она стоит она от 300-500 рублей за 30-60-секундный ролик и позволяет быстро привлечь внимание аудитории и повысить узнаваемость бренда.

Источник

Видеофон для сайта

Один из популярных способов привлечения внимания людей, зашедших на сайт — это добавление видеофона для первого экрана главной страницы.

В этой статье мы разберем, какие нюансы существуют в применении такого элемента, когда его лучше использовать и как реализовывать.

Плюсы и минусы добавления видео-фона

Что касается плюсов видеофона, то первое, что приходит в голову, это очевидное — “это красиво”. При грамотной реализации фоновое видео оживляет сайт, позволяет посетителю сразу познакомиться с предоставляемой услугой — показать процесс производства, показать, что, зайдя на этот сайт, посетитель попал в реально-существующую компанию, которая готова показывать свой производственный процесс. Это повышает доверие.

На какие нюансы стоит обратить внимание при создании фонового видео

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

Само видео, его монтаж и размер. Любой видеофайл — это дополнительное время загрузки сайта. Несмотря на то что сейчас многие пользуются высокоскоростным интернетом, не следует ставить на фон фрагменты большой длительности и большого размера — оптимальная продолжительность — 10-20 секунд, вес файла — не более 10 Мб.Стоит помнить, что фон является зацикленным, поэтому нужно предусмотреть, чтобы переход из окончания видеоролика в начало не выглядел резким, можно использовать плавное затемнение. Оптимальное разрешение — 1280 на 720 пикселей — оно хорошо отображается на большинстве экранов и не сильно искажается на больших мониторах. Сам видеоряд не должен быть резким, дерганным, с большим количеством смены планов и цветов, он должен показывать основные преимущества предприятия. Например, для художников — можно показать небольшие фрагменты создания картины, для крупных предприятий — моменты отлаженной работы заводских конвейеров. Существует важный совет, по поводу видеофона — на него стоит ставить видео, “которым вы гордитесь”. Ролик не должен отвлекать посетителя от главной цели, ради которой он зашёл на ресурс.

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

Читайте также:  Капитальный ремонт двигателя регламент

Итак, о технической стороне вопроса дальше и пойдет речь.

Как вставить видео на фон сайта

Стоит сразу же оговориться, что представленный далее метод — самый общий и типичный, и порой его приходится видоизменять под нужды и особенности конкретного сайта.

HTML-разметка нашего элемента будет выглядеть вот так:

У нас есть основной обертывающий блок с классом “video-box”, внутри которого располагается наше видео. Для самого тега “video”, находящегося внутри, указываем атрибуты preload и autoplay — для загрузки и автоматического воспроизведения видеоролика при открытии страницы и атрибут loop для циклического воспроизведения фрагмента. Также здесь присутствует атрибут playsinline для того, чтобы при воспроизведении видео на телефоне оно автоматически не переходило в полноэкранный режим (актуально, например, для устройства на ios) и атрибут muted для отключения звука.

Внутри тега видео указаны два тега с источником “source”. Рекомендуется всё делать именно в таком виде — указывать как минимум два видеофайла с разными форматами для разных браузеров.

CSS — стили для данного блока:

Для основного блока задаем позиционирование, ширину и высоту во весь экран, и картинку на фон, пока видео не прогрузится

Для тега “video” также задаем позиционирование и размеры в соответствии с родителем

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

Добавление youtube-видео на фон сайта

Использовать видеофайлы, загруженные непосредственно в папку с сайтом не всегда удобно, и существует альтернатива — добавление видеоролика с youtube в качестве фона. При использовании данного метода следует удостовериться, что видео доступно для всех стран и не нарушает авторские права.

HTML-разметка в данном случае выглядит следующим образом:

Здесь существует основной оборачивающий контейнер с классом youtube-video-background, внутри которого есть блок, собственно, содержащий внутри себя iframe, в котором указан источник видео — ссылка с youtube.

Ссылка на источник видео имеет несколько параметров, на которые нужно обратить внимание:

xxxxxxxxxxx — id видео (вставляется в двух местах ссылки)
controls=0 — скрывает youtube-панель
showinfo=0 — скрывает информацию о видео
rel=0 — скрывает показ рекомендованных видео после окончания воспроизведения
autoplay=1 — позволяет видео запускаться автоматически
loop=1 и playlist=xxxxxxxxxxx — включают зацикливание видео
start=0 — запускает видео с самого начала (при необходимости, можно указать любое время видео как стартовую точку воспроизведения)
mute=1 — отключает звука видео

Перейдем к стилям. Для основного контейнера устанавливаем позиционирование, а также картинку на фон, которая будет отображаться, пока не загрузилось видео:

Для iframe и родительского div задаем позиционирование и отменяем любые действия при наведении на них мышкой:

Добавляем несколько медиа запросов, которые будут отвечать за масштабирование видео при изменении размера экрана, в зависимости от соотношения сторон:

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

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

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

Выбор видеоряда для фона на сайт ограничен лишь фантазией создателя, однако, мы приведем ниже несколько примеров видео из разных сфер:

Мастерские по производству мебели, обуви, предметов декора и т.д. — видео работы станков, инструментов в руках рабочих, красивый процесс производства

Сфера туризма — яркие виды природы, эмоции путешественников

Аренда авто, лодок, автобусов — видеоряд, показывающий удобство, хорошее состояние и внешний вид объектов

Салоны красоты, фитнес-центры — красивый “проход” камеры по салону, показ комфортабельности, стильного интерьера

Аренда, продажа недвижимости, коттеджи, квартиры — внешний вид объектов и территории вокруг

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

Ручное производство (обувь, одежда, украшения, аксессуары) — видео, где эти вещи надеты на живых людях.

Юридические компании, консалтинг — лица реальных сотрудников, юристов

Для любых сфер продажи товаров — фрагмент с примером использования товара. Например, если вы продаёте спиннинги для рыбалки, то можно разместить видео с рыбаками, уловом

Наша компания занимается разработкой и доработкой сайтов любой сложности. Если вам необходимо добавить видеофон на сайт, или произвести какую-либо иную правку на сайте — оставьте заявку в форме ниже. Мы перезвоним вам в течение 30 минут.

Читайте также:  Стоимость ремонта квартиры москве 2016

Источник

Видео в background для сайтов. Примеры и 5 бесплатных ресурсов с видео

Картинкой в бэкграунде сегодня никого не удивишь, гораздо эффектнее поставить короткое видео ! Обычно это ролик на 20-30 секунд с бесконечным повторением. Посмотрим, как это выглядит.

Сайт- презентация Axe effect. Короткий ролик в бэкграунде акцентирует внимание посетителя на продукте.

Можно подобрать ненавязчивую музыку под видео или наоброт, веселую и задорную, как действие на видео. Например, сайт о модных вещах. Если добавляете звук на сайт, обязательно приделывайте контрол, который музыку отключает и кладите его на видное место, не всегда звук бывает уместен.

Сайт кафе. На первой странице слайдер и первый слайд — видео слайд. Смотрится очень эффектно.

Этот пример необычен тем, что видео подгружается с Youtube. Сделано это с помощью jQuery плагина, который вы запросто можете использовать на своем сайте.

Плагин можно взять здесь. В плагине куча настроек. Например:

  • mute, можно отключить звук
  • opacity, позволяет настроить прозрачность от 0 до 1
  • optimizeDisplay оптимизирует видео под размер окошка браузера
  • loop проигрывать ли видео бесконечно
  • startAt остановиться на такой то минуте
  • showYTLogo показывать лого

и множество других полезных настроек.

Так же может проигрывать список видео, применять css фильтры. В плеер можно встроить даже Google Analytics. Плеер доступен в виде плагина к WordPress.

Все это хорошо, но где же взять видео. А взять их можно на этих сайтах, причем совершено бесплатно !

Несколько советов, как лучше использовать видео в бэкграунде.

  1. Видео должно быть 15-30 секунд.
  2. В режиме autoplay, то есть бесконеное проигрывание.
  3. Аудио лучше выключить.
  4. Обратите внимание на текст, текст не должен сливаться с картинкой из видео.
  5. Лучше использовать короткое сообщение или слоган с хорошей типографикой.

Лучше всего, когда видео рассказывает какую-то историю о вашем бизнесе. Пример с кафе выше очень удачно демонстрирует эту мысль. Сделать такое видео вы можете и сами, зеркалкой нынче никого не удивишь. Пользуйтесь и повышайте внимание и конверсию вашего сайта !

Обзор подготовлен Startr — чат на slack, онлайн питчи, презентации, startup дайждест, аналитика.

Источник

Как сделать видеофон для лендинг пейдж

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

Давайте посмотрим примеры подобных сайтов. Большинство из них, неоправданно долго грузятся — и это главный минус видеофона. Но это не всегда так. Все зависит от того, как оптимизировано видео, какой оно продолжительности и так далее. Можно и css код раздуть до безобразных размеров, а можно грамотно оптимизировать и сократить вес в 2-3 раза. (Кстати, об оптимизации css кода можно почитать в этой статье)

daarnhouwer.com

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

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

Как сделать видео фоном сайта?

Разбираясь в вопросе ,как добиться эффекта с видеофоном, в свое время, я обнаружил несколько способов. Одни из них проще, другие сложнее, некоторые требуют javascript, а другие нет. Сегодня я расскажу вам о том, как добиться подобного эффекта без всяких там скриптов. Приступим.

Сразу прошу извинить за качество видео. Оно 720p, так что большие мониторы — вам привет! Прошу камнями не кидать, это только в качестве примера, а вы все равно будете подбирать под те разрешения, на которые ориентирован проект.

Итак, помните статью, в которой мы говорили про то, как вставить видео на сайт при помощи тегов html5? Сегодня знания от туда нам пригодятся. А в этой статье я не буду подробно описывать каждую строчку.

HTML разметка

Сразу после тега </body> вставьте фоновое видео на сайт следующим образом. Если хотите подробнее разобраться, читайте статью, о которой я упоминал выше.

CSS разметка

Для того, чтобы видео занимало всю ширину экрана и фон был неизменным на всем сайте — добавьте следующие стили:

Но, если хотите сделать видеофон только, например, первого экрана, то измените значение position на absolute. Буду искать еще способы подключения видео в качестве фона, так как не люблю я это абсолютное позиционирование. Даже текст подвинул padding_ом. Но страничка грузится намного быстрее чем те, которые были в примере.

Если вам известны другие способы реализации подобного эффекта, то пишите в комментариях — обсудим.

Источник