Ellada-flowers.ru

Заработок и деньги
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

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

Как создать собственный видеофон хедера

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

В данной статье мы постараемся максимально доступно объяснить, как сделать собственный видеофон в шапке сайта без каких-либо трудностей.

Вводная часть

В качестве примера мы будем использовать шаблон GavickPro Steak House. Он актуальный, очень популярный и, судя по поисковым запросам, наиболее интересный в отношении видеофонов, поэтому мы сэкономим время, которое пользователи могли потратить на поиск по форуму или использование обратной связи. По умолчанию хедер шаблона отображает картинку слайдера. Здесь можно установить случайный выбор изображения либо вращать слайдер в реальном времени, но добавить сюда видео изначально не представляется возможным. Давайте же решим эту проблему.

Способы добавления видеофонов

Если вы ходите добавить видеофон на всю ширину страницы вашего веб-сайта и не ограничены в использовании пространства главной страницы, то написание кода вручную может оказаться нецелесообразным, поскольку специально для таких целей существуют некоторые готовые плагины, такие как YT Player for Background Videos . Конфигурирование данного плагина достаточно несложное, но он может быть использован не со всеми шаблонами. Для более простых видеофонов существуют некоторые другие методы, которые также можно использовать.

Использование плагина вставки iframe для отображения видео с популярных сервисов.

Сервисы как YouTube, Vimeo и т.п. позволяют отображать свои видеоролики с помощью iframe. (Не забудьте проверить лицензию видео, которое вы хотите использовать. Избегайте изпользования материалов, защищённых авторским правом либо удостоверьтесь, что их использование разрешено вам владельцем, если это необходимо). После выбора видео необходимо кликнуть на кнопку «поделиться», чтобы получить iframe-код, готовый к вставке на страницу вашего сайта. Чтобы видео воспроизводилось, нам потребуется добавить вышеупомянутый код в файл Steakhouse/header-frontpage.php в область хедера, после строки:

Добавленный код должен выглядеть следующим образом:

Дополнительно можно указать для вставленного кода некоторые параметры:

— для автоматического воспроизведения видео, отключения управления воспроизведением и активации циклического воспроизведения видео. Всё это важно, если вы хотите получить непрерывное воспроизведение.

После обновления страницы вы увидите, что видео отображается, но в маленьком «контейнере» перед хедером страницы. Для того, чтобы оно было правильно размещено на странице, потребуется немного CSS-стайлинга.

Можно использовать файл файл SteakHouse/css/override.css либо метод, указанный «здесь» (ссылка), чтобы добавить собственный CSS-код в шаблон.

Для начала необходимо сделать фон #gk-header and #gk-bg прозрачным — это позволит отобразить видеоролик.

Затем следует установить позицию видеоконтейнера как «повсеместная» и задать значения z-index proper (+1) или negative (-1) для лучшего эффекта:

Загрузка и использование собственного видео

Если вы ходите использовать собственное видео, а не видео с хостинга на подобие Youtube, то первое, что для этого потребуется сделать, это загрузить данное видео в вашу медиатеку, после чего вы сможете увидеть и скопировать полный путь к загруженному файлу. Затем, определив место отображения хедера, перейдите к файлу Steakhouse/header-frontpage.php и добавьте ваше видео в хедер — в то же место, как и в методе, описанном выше, но немного другой код:

Читать еще:  Организация каталога товаров на сайте

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

Теперь видео будет отображаться, но только в маленьком «контейнере» перед хедером (как и после вставки iframe в предыдущем случае). Если необходимо установить это видео в качестве фона, то потребуется выполнить CSS-стайлинг, как и прежде.

Как и ранее, необходимо сделать прозрачным фон #gk-header и #gk-bg , чтобы предоставить некоторое свободное пространство для видео и сделать его видимым для пользователей, и вновь установить позицию видеоконтейнера «повсеместная» и задать значения z-index proper (+1) или negative (-1) :

Теперь это должно выглядеть приблизительно так:

На сегодня это всё! А теперь идите и добавьте видеофон для содержимого вашего сайта! Надеемся, что эта статья была полезной, а если у вас возникли какие-то предложения, то почему бы не поделиться ими в комментариях ниже?

4 простых шага как добавить фоновое видео на ваш WordPress сайт

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

Сейчас видео, которые воспроизводятся на фоне — одна из самых популярных тенденций в мире веб-дизайна. Браузеры могут воспроизводить фоновое видео, используя либо HTML5 тег video >, либо формат H.264 . Этот процесс запускается автоматически, независимо от других. Вы можете управлять им и контролировать его, как и любой другой элемент страницы. Видео фон поможет вам сделать тот сайт, который наверняка запомнится посетителям и эффектно выделится из общей массы.

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

Шаг 1. Выберите ваш источник для видео

Вы можете использовать ваши собственные видео, выбирать видео из YouTube и Vimeo или использовать другие видео-сайты. Большинство интегрированных видеоплееров могут использовать любой из этих методов.

Ниже представлено несколько ресурсов, где бы вы могли найти подходящее стоковое видео:

Dissolve

На Dissolve вы найдете более 600,000 стоковых видео в 24 различных категориях, которые вы можете использовать на своем сайте. Они включают в себя как премиум, так и бесплатные видеоролики. Dissolve даже поможет вам найти необходимое видео на основе монтажного списка, сценария или концепции. Цены начинаются от $50 за клип.

iStock

iStock от Getty Images предоставляет возможность выбрать HD-видео и стоковые видео из 21 категории. Все видео не требуют дальнейших выплат за авторское право, вы можете приобрести их в отдельности или оформить подписку. Цены начинаются от $60.

ShutterStock

На ShutterStock вы найдете почти 3 миллиона видео (также не требуют дальнейших выплат за авторское право) в 28 категориях. Вы можете купить их по отдельности или набором. Цены начинаются с $19.

Читать еще:  Проверить просмотры сайта

Шаг 2. Конвертируйте видео до нужного формата и размера

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

Шаг 3. Выберите видеоплеер

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

HTML5, CSS и JavaScript

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

Разметка

Сначала создайте контейнер для JavaScript:

Код включает в себя два изображения: первое — для заполнения (первый кадр из видео) и второе — альтернативное изображение.

Скрипты

Этот код для теста браузера:

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

CSS

Вы можете оформлять разметку с помощью CSS. Используя CSS, вы сможете установить размер контейнера с помощью тегов img > или video >. Пропорции при этом сохраняются.

Плагины

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

Image&V >

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

Плагин поставляется с двумя скинами и двумя стилями, возможностью анимированного текста, двумя переходами, позволяет вставлять ссылки в каждый слайд и размещать текстуру поверх изображений. Отлично работает с YouTube и Vimeo. Благодаря ему вы сможете самостоятельно настроить более 40 параметров.

Стандартная лицензия стоит $17, предназначена для одного клиента и для некоммерческих проектов. Расширенная лицензия стоит $85, предназначена для одного клиента и может использоваться для коммерческих проектов.

Easy V >

Это премиум плагин, который работает со всеми браузерами, включая Internet Explorer 7 и 8. Он будет автоматически выбирать наиболее оптимальный формат файла для отображения. Плагин использует HTML5 и автоматически переходит к Flash, если HTML5 не поддерживается, и наоборот. На мобильных устройствах он будет выводить изображения.

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

Стандартная лицензия стоит $14, предназначена для одного клиента и для некоммерческих проектов. Расширенная лицензия стоит $70, также предназначена для одного клиента и может использоваться для коммерческих проектов.

Читать еще:  Шаблоны сайтов торрент

V >

Это премиум плагин, который воспроизводит видео как с автономных хостингов, так и с Vimeo или YouTube. Плагин будет выводить их в полноэкранном режиме или с фиксированной шириной. Вы также можете поместить текстуру поверх видео. Совместим с мобильными устройствами (без автозапуска). Имеет более 30 параметров, которые можно настроить без особых усилий.

Стандартная лицензия стоит $16, предназначена для одного клиента и для некоммерческих проектов. Расширенная лицензия стоит $80, предназначена для одного клиента и может использоваться для коммерческих проектов.

mb.YTPlayer for background v >

Данный плагин может использовать любое видео с YouTube в качестве вашего фонового видео. Он использует YouTube iframe API и выводит видео с помощью тега HTML5 VIDEO.

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

bgvideo (free)

Этот плеер будет также размещать шорткод на вашей странице или посте. Он будет воспроизводить MP4, WebM, или OGG видео с URL-адреса, который вы вводите. Вы можете настраивать высоту, ширину, фиксированное положение, автозапуск, цикл и параметры звука. Для настройки bgvideo потребуется сделать несколько дополнительных действий, о которых вы уже успели прочитать в нашей статье.

Шаг 4. Настройте ваше видео

На самом деле, настроить ваше видео очень легко.

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

  • Авто-воспроизведение. Это самая популярная настройка. Видео должно автоматически запускаться после того, как загрузились все остальные элементы.
  • Цикл. Стоит ли делать цикл с видео и воспроизводить его постоянно? Если ответ положительный, то внимательно устанавливайте начальную и конечную точку, чтобы переход смотрелся естественным и плавными. Процесс повторения не должен обращать на себя много внимания.
  • Аудио. Мы не рекомендуем автоматически воспроизводить аудио. Позвольте пользователям самостоятельно, при желании, включать звук. Аудиофайлы требует значительных дополнительных ресурсов и сильно нагружают браузер. К тому же, вы не можете быть уверены в музыкальных предпочтениях ваших посетителей.
  • Демо изображение. Если браузер не совместим с плеером, то он должен выводить альтернативное изображение. Это поможет вам избежать того, что сайт будет выглядеть «поломанным» и пустым.

Заключение

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

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

Ссылка на основную публикацию
Adblock
detector