Домашняя страница
- 5 января 2017 г. Привет всем! Этот пост написал наш друг Кевин Малдун, и он какое-то время лежал на заднем плане. В 2017 году мы надеемся опубликовать еще немного информации в этом блоге и пригласить еще нескольких человек писать гостевые посты.
Для начала Кевин написал здесь отличное руководство по использованию функции фонового видео в Beaver Builder. С момента написания этой статьи мы добавили возможность напрямую ссылаться на видео YouTube или Vimeo, а также возможность ссылаться на видео, размещенное на другом сервере. Надеюсь, вам понравится!
Видеофон может добавить вашему сайту нотку профессионализма. Видеофоны часто используются на корпоративных веб-сайтах, в портфолио и онлайн-галереях.
Если вы искали новый дизайн для своего веб-сайта, вы, несомненно, видели, как используются видеофоны. Разработчики тем WordPress всегда ищут способы продемонстрировать свои проекты и часто используют видеофон, чтобы продемонстрировать, на что способен их дизайн.
К счастью, вам не нужно тратить деньги на новую тему WordPress, чтобы добавить видеофон на свой сайт. Активировав Beaver Builder, вы сможете за считанные минуты создать профессиональный видеофон на любой странице вашего веб-сайта. Если вы предпочитаете, вы можете отображать видеофон только на некоторых частях вашей страницы.
В этом уроке я хотел бы показать вам, как можно добавить видеофон с помощью плагина WordPress для визуального компоновщика страниц Beaver Builder, выполнив три простых шага.
Добавить фоновое видео с помощью Beaver Builder невероятно просто.
Вы обнаружите, что самая сложная часть этого руководства — это выбор видео для использования на вашем веб-сайте, поскольку их тысячи.
Выберите видео, которое поможет вам задать тон, который вы хотите донести. Например, видео загруженного офиса, где люди работают вне дома, отлично смотрится на корпоративном веб-сайте, а спокойное видео о природе хорошо подойдет для веб-сайта, посвященного здоровью.
В Интернете есть множество мест, где вы можете найти бесплатные и платные видеоролики для фона.
Мое любимое место для поиска видео — Coverr. Все видеоролики выглядят профессионально, их можно бесплатно загрузить и использовать. Каждую неделю в нескольких категориях добавляется семь новых видео, так что вы обязательно найдете видео, которое вам понравится. Каждое видео можно просмотреть перед загрузкой zip-файла.
У Coverr есть большой выбор видеофонов, и все их можно загрузить бесплатно.
Другие хорошие сайты, на которых можно найти бесплатные видеофоны, включают (в произвольном порядке):
Видео вы также найдете на видеосервисах. На YouTube можно встретить такие каналы, как OrangeHD, которые предоставляют видеофоны. На Vimeo также можно найти отличные видеоролики на таких ресурсах, как FreeHD и Life of Vids.
Вы также найдете кадры в некоторых социальных сервисах. Проверьте субреддиты, такие как Footage и Stockfootage, на Reddit. Flickr тоже заслуживает внимания, но обязательно выберите Creative Commons в качестве лицензии.
На VideoHive можно найти десятки тысяч видеофонов.
Видеофоны премиум-класса не обойдется вам дорого. Цены на VideoHive начинаются всего с 8 долларов за видео. На VideHive доступно более четверти миллиона файлов стокового видео, и более тридцати шести тысяч из них подходят для видеофонов.
Сервисы стоковых изображений и стокового видео, такие как Shutterstock и VideoBlocks, как правило, стоят немного дороже, если вы не подписываетесь на ежемесячной основе, но если ваш бюджет может немного расшириться, вы найдете там много отличных видео.
После того, как вы выбрали видеофон, вам необходимо подготовить файл.
Ваш основной видеофайл должен быть сохранен в формате MP4. Это не должно быть проблемой, поскольку именно этот формат файлов использует подавляющее большинство видеосайтов, т.е. загруженный вами файл уже будет сохранен с расширением .mp4.
Вам также необходимо будет загрузить свое видео в формате видео WebM, поскольку браузеры Opera и Firefox используют его.
WebM — это видеоформат без лицензионных отчислений, разработанный Google (первоначально он был разработан On2 Technologies). Он используется Opera и Firefox вместо видеотега HTML5 <video>.
На странице инструментов официального веб-сайта проекта WebM вы найдете множество плагинов, а также бесплатных и коммерческих инструментов, которые помогут вам преобразовать видеофайл в видеоформат WebM.
Преобразование небольшого видеофайла не займет много времени.
Существует также отличный онлайн-инструмент для конвертации WebM, доступный на сайте Online-Convert.
Вы можете загрузить свой файл в инструмент напрямую или дать ссылку на URL-адрес видеофайла, если вы уже загрузили видео на свой веб-сайт. Параметры видео, такие как разрешение, битрейт и частота кадров, можно настроить с помощью этого инструмента. Вы также можете вращать и переворачивать видео.
Инструмент преобразования файлов от Online-Convert — отличный ресурс.
Последнее, что вам нужно сделать, это подготовить «Запасную фотографию». Это фоновое фото будет отображаться, если по какой-либо причине видеофон не может быть отображен. Например, если посетитель использует устаревший браузер, в котором нет нужного видеокодека.
Если вы хотите, чтобы резервная фотография соответствовала фону вашего видео, откройте видео на своем компьютере и сделайте снимок экрана, используя клавишу «Print Screen» на клавиатуре. Затем вставьте изображение в фоторедактор и сохраните файл. Альтернативно, используйте уникальную фотографию, которая по внешнему виду похожа на фон вашего видео.
В последнем разделе я отметил, что мой любимый ресурс для видеофонов — Coverr.
Одна из причин, по которой мне нравится Coverr, заключается в том, что загруженный zip-файл содержит все необходимое.
Каждый zip-архив содержит видео в форматах MP4, OGV и WebM. Также предоставляется полный фотоснимок видео в разрешении Full HD (1920×1080).
Поэтому, когда вы загружаете видеофон с Coverr, вам не нужно будет использовать инструмент для конвертации видео или редактор фотографий для подготовки видеофайла.
Теперь, когда у вас есть два видеофайла и резервная фотография, вы можете назначить файлы странице с помощью Beaver Builder.
Есть два способа запустить Beaver Builder для страницы вашего веб-сайта (будь то сообщение в блоге, страница или другой тип сообщения).
Первый вариант — получить доступ к редактору рассматриваемой страницы. Перейдя в редактор WordPress, просто нажмите вкладку «Конструктор страниц», чтобы запустить Beaver Builder для этой страницы.
Пример редактора страниц WordPress.
Кроме того, вы можете запустить Beaver Builder из интерфейса вашего веб-сайта.
Для этого вам необходимо войти на свой сайт, чтобы панель администратора отображалась вверху каждой страницы. Затем просто найдите страницу, на которую вы хотите добавить видеофон, и нажмите ссылку «Конструктор страниц» в верхней части страницы.
Вы можете загрузить Beaver Builder при просмотре своего веб-сайта.
В обоих приведенных выше примерах предполагается, что вы изменяете существующую публикацию или страницу на своем веб-сайте. Если вы хотите создать страницу с нуля, создайте новую страницу на своем веб-сайте, а затем загрузите пустой шаблон из окна шаблонов Beaver Builder. Это позволит вам начать создание страницы с чистого листа.
Нажмите ссылку «Шаблоны» на панели инструментов Beaver Builder, чтобы загрузить окно выбора шаблонов макета.
В приведенном ниже примере я добавляю фоновое видео к существующей странице с контентом.
Теперь, когда Beaver Builder активирован, наведите указатель мыши на область, к которой вы хотите добавить видеофон, и вы увидите список значков, отображаемых в верхней части строки.
Нажмите на значок гаечного ключа, чтобы загрузить настройки строки.
Выберите значок настроек строки.
Когда окно настроек строки загружается, по умолчанию используется вкладка стиля.
Прокрутите вниз до раздела под названием «Фон». В раскрывающемся списке вы увидите шесть вариантов: «Нет», «Цвет», «Фото», «Видео», «Слайд-шоу» и «Параллакс».
Выберите Видео.
Выберите видео в качестве фона в поле настроек строки.
Откроется возможность загрузить видео в формате MP4 и WebM, а также загрузить резервную фотографию.
Отображаются три разных поля.
Нажатие «Выбрать видео» или «Выбрать фото» загружает медиатеку WordPress. Вы можете загрузить каждый файл или выбрать его из своей медиатеки, если файлы уже загружены.
Загрузите как видеофайлы, так и резервную фотографию.
После того, как вы загрузите все файлы, окно настроек строки должно выглядеть примерно так.
Все файлы уже загружены.
На этом этапе вы можете сохранить окно настроек строки. При желании вы также можете сохранить поле настроек строки в качестве шаблона и сделать его глобальным на своем веб-сайте.
Как вы можете видеть ниже, видео теперь отображается на фоне моего текста.
Как выглядела моя страница после установки видеофона.
Если фоновое видео не занимает всю ширину области контента (например, из-за используемой темы), измените ширину контента на полную ширину в поле настроек. В этой области вы также можете настроить ширину страницы и высоту строки.
Если вам нужно еще изменить макет, перейдите на вкладку «Дополнительно», поскольку она позволяет вам изменить отступы и поля вашей строки. Вы также можете определить, как макет будет выглядеть на мобильных устройствах, и применить селекторы CSS из этой области.
При необходимости отрегулируйте ширину страницы до полной ширины.
В примере моего видео-фона, который я показывал ранее, вы, возможно, заметили, что текст на странице не выделяется на фоне видео.
Эту проблему можно решить, настроив цвета, используемые в строке. Цвет текста, цвет ссылки, цвет при наведении ссылки и цвет заголовка можно изменить.
Настройте цвета, чтобы ваш контент выделялся.
Наложение фона поможет вашему видео выделиться или отойти на задний план. Это невероятно полезно, поскольку поможет вам отображать видео именно так, как вы хотите.
Наложение фона — это эффективный способ изменить внешний вид вашего видео.
Я советую вам поиграть с цветом и непрозрачностью наложения, пока не добьетесь желаемого результата. На скриншоте ниже вы можете увидеть, как выглядел фон моего видео, когда я применил красный цвет наложения с непрозрачностью 50%.
Обязательно воспользуйтесь функцией непрозрачности Beaver Builder.
К строке также можно применить рамку. Вы можете выбрать сплошную, пунктирную, пунктирную или двойную границу. Также можно определить цвет, непрозрачность и ширину границы.
Границы могут быть размещены вокруг области содержимого.
Beaver Builder — это адаптивное решение, которое работает во всех современных браузерах, однако все же разумно проверить свою страницу в разных браузерах, чтобы убедиться, что она выглядит именно так, как вы хотите.
Видеофоны могут помочь вашим страницам оживиться.
Как только вы поймете, как можно добавлять видеофоны с помощью Beaver Builder, вы сможете применять видеофоны к страницам за считанные минуты. Я рекомендую сначала загрузить около дюжины видеороликов, чтобы вы могли протестировать различные видеоролики на своем веб-сайте и посмотреть, что работает, а что нет.
Я лишь поверхностно рассказал о том, как можно использовать видеофоны на вашем веб-сайте.
Beaver Builder позволяет вам создавать уникальный макет на ваших страницах и наполнять их десятками модулей контента и виджетов WordPress. В приведенном выше примере я показал, как видео можно применить в качестве фона для текста, однако видеофон можно применять к чему угодно.
Например, вы можете отображать видео в качестве фона слайдера контента, галереи, таблицы цен, карусели публикаций или как часть целевой страницы. На самом деле нет предела тому, что вы можете сделать.
Надеюсь, вам понравился этот урок и вы нашли его полезным. Если да, то я призываю вас подписаться на нас в Facebook, Slack и Twitter.
Обязательно загляните в блог Beaver Builder в ближайшие месяцы, так как у нас запланировано фантастическое содержание и обучающие материалы.
Удачи.
Кевин
20 февраля 2017 г., 9:05Отличный урок! Спасибо!
Но как заставить видео работать в фоновом режиме в мобильном браузере?
20 февраля 2017 г., 12:49Привет, Дэйв. Я считаю, что мы отключаем фоновое видео на мобильных устройствах. Причина этого в том, что большинство мобильных соединений медленнее, и многие люди платят за передачу данных. Я считаю, что вам придется добавить видео в строку вручную, используя код, чтобы обойти эту проблему. Извините за беспокойство.
20 февраля 2017 г., 9:53Видео плохо реагирует.
2 марта 2017 г. в 19:20Потрясающий пост! Очень информативно и именно то, что я искал. Пожалуйста, продолжайте публиковать подобные посты. Спасибо, что поделились.
20 марта 2017 г., 18:43Мне кажется, фоновое видео не слишком хорошо работает. Мой файл MP4 весит всего 9,5 МБ, он загружается долго (около 5 секунд) и, похоже, немного заикается. У меня загружены версии в формате mp4 и webm (1,7 МБ). Есть идеи? Что я делаю неправильно?
20 марта 2017 г., 23:14Привет, Дэррил! Извините, у вас проблемы. Возможно, вы захотите прочитать эту статью и посмотреть, сможете ли вы оптимизировать видео?
http://rigor.com/blog/2016/01/optimizing-mp4-video-for-fast-streaming
14 января 2018 г. в 17:40Можете ли вы сделать видео параллакс?
15 января 2018 г., 8:56Привет, Стивен. К сожалению, с Beaver Builder это сделать невозможно.
16 июля 2018 г., 7:44 привет! какая это версия Beaver Builder? Я не получаю все возможности для разных типов файлов, когда пытаюсь загрузить заголовок видео.
У кого-нибудь есть идеи, пожалуйста
25 июля 2018 г., 4:28Если я использую фоновое видео с URL-адреса Youtube, качество всегда будет 480p. Можно ли это изменить?
30 декабря 2018 г. в 16:49В последней версии нет возможности использовать видео в качестве фона. Есть предложения?
4 января 2019 г., 9:33Привет, Шейла! Вы используете бесплатную или платную версию BB? Мы добавили несколько дополнительных опций в выбор фона, но видео по-прежнему должно быть там. Если нет, напишите нам сообщение через нашу поддержку или страницу контактов, и наша служба поддержки сможет проверить.
13 июля 2019 г. в 18:45Фоновое видео по-прежнему отображается на мобильном устройстве, но оно отображается некорректно. Каково решение этой проблемы? Выглядит красиво в браузере, но не конвертируется при просмотре на мобильном устройстве.
27 августа 2019 г., 11:44Я загрузил видео в формате mp4 размером 3 МБ для воспроизведения в заголовке моей домашней страницы, которое работает, когда я нахожусь в режиме редактирования с помощью Beaver Builder. После публикации изменения видео будет продолжать воспроизводиться, пока я не перейду на другую страницу меню. При возвращении на домашнюю страницу, где находится видео, оно больше не воспроизводится в заголовке. В чем может быть проблема?
16 января 2020 г. в 17:19Как я могу поставить видео на паузу после того, как оно было воспроизведено один раз? Затем он должен замереть на последнем кадре…
20 января 2020 г., 12:21Я не верю, что это возможно без реализации фонового видео с помощью специального кода. Извини.
Наш информационный бюллетень пишется лично и рассылается примерно раз в месяц. Это ни в малейшей степени не раздражает и не является спамом.
Мы обещаем.
Отличные информативные материалы, Кевин! Спасибо!