Полное руководство по Beaver Builder + Swarmify для видеохостинга

Используете ли вы Beaver Builder? Если это так, Swarmify поможет вам быстро, без буферизации и профессионального качества видео на вашем веб-сайте без больших затрат.

Beaver Builder, поддерживающий более миллиона веб-сайтов, является популярным конструктором страниц с перетаскиванием среди пользователей WordPress.

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

Например, я получил следующую страницу менее чем за пять минут:

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

Если вам не нравятся шаблоны Beaver Builder, вы можете начать с пустой страницы. Затем перетащите блоки контента на место и визуально создайте остальную часть своей страницы, не написав HTML и не мучаясь с короткими кодами.

В прошлом мы рассмотрели другие конструкторы страниц, такие как Divi, Elementor, Brizy и Webflow. Пожалуйста, ознакомьтесь с руководствами всякий раз, когда вы можете :)

Сегодня мы покажем вам, как именно использовать Beaver Builder и Swarmify для быстрого, бесперебойного и профессионального видео на вашем веб-сайте.

Без дальнейших церемоний, давайте начнем, так как есть чему поучиться.

Что такое BeaverBuilder?

Прежде всего, давайте узнаем больше о Beaver Builder ради первого таймера среди нас.

Beaver Builder — это премиальный конструктор страниц WordPress. Инструмент помогает визуально создавать адаптивные страницы WordPress.

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

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

Крупнейшие имена в WordPress любят и доверяют Beaver Builder:

Лучшая часть Beaver Builder заключается в том, что он настолько прост в использовании, что вы будете создавать веб-сайты WordPress за считанные часы, а не дни.

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

Особенности, говорите?

Да, Beaver Builder может похвастаться следующими функциями:

• 100% адаптивный дизайн означает, что ваши страницы будут отлично выглядеть на разных устройствах
• Beaver Builder Theme Framework для всех ваших проектов WordPress
• Десятки готовых шаблонов для создания целевых страниц, домашних страниц, страниц контента и т. д.
• Beaver Builder Конструктор перетаскивания страниц
• Множество блоков контента для добавления текста, изображений, кнопок, заголовков, видео и т. д.
• Множество виджетов WordPress, включая виджет SmartVideo.
• Глобальные настройки
• Пользовательский HTML, CSS и JavaScript, если необходимо
• Горячие клавиши
• Надстройка Beaver Themer для настройки каждой части вашего веб-сайта, включая верхние и нижние колонтитулы.
• Полный контроль над дизайном вашего сайта
• Совместимость с широким спектром тем WordPress
• Бесплатная версия доступна в виде плагина на WordPress.org.
• Поддержка мирового уровня
• Возможность мультисайта
• Белая маркировка
• И так далее

Beaver Builder — это мощный конструктор страниц, который упрощает создание красивых и отзывчивых веб-сайтов WordPress. Если вы впервые, вы можете попробовать бесплатную версию и позже перейти на профессиональный план.

Они предлагают три ценовых пакета, идеально подходящих для начинающих владельцев сайтов, профессиональных фрилансеров и креативных агентств. Все пакеты позволяют использовать Beaver Builder на неограниченном количестве сайтов.

Теперь, когда мы все на одной странице, давайте перейдем к SmartVideo Swarmify.

Что такое Swarmify SmartVideo?

Swarmify — это компания, занимающаяся ускорением видео, которая предлагает потоковую передачу с качеством Netflix для всех в простом пакете. Наша платформа SmartVideo упрощает все сложные и дорогостоящие движущиеся части, связанные с развертыванием видео.

SmartVideo автоматически обрабатывает загрузку, кодирование, размещение и доставку ваших видео независимо от того, где вы их храните, будь то YouTube, Dropbox, Amazon S3, Google Cloud и т. д.

Зачем Swarmify SmartVideo?

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

Благодаря нашему решению для доставки вы можете доставлять видео в 12 раз быстрее, чем средние игроки в отрасли . Эта же платформа доставки также поможет вам сократить простои в 8 раз .

«Swarmify SmartVideo запущен в мае 2017 года. Мы наблюдаем огромный рост каждый месяц. Все больше компаний осознают реальную стоимость использования YouTube. До появления SmartVideo наше решение было доступно только крупным корпоративным компаниям. В общей сложности мы недавно отпраздновали потоковое воспроизведение более пятисот миллионов видео», — говорит Натан Барнетт, генеральный директор Swarmify. «Если ваш сайт загружается быстро, а видео загружается медленно, вы все равно потеряете этого клиента». Источник: YourStory.com

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

Вот некоторые функции, которые делают SmartVideo лучшей платформой для ускорения видео.

• Чистый, не отвлекающий видеоплеер — YouTube и другие платформы загромождают свой плеер ссылками, чтобы перекачивать ваш трафик. Проигрыватель SmartVideo чистый, настраиваемый и защищенный от утечек.
• Автоматическое преобразование YouTube и Vimeo. Если вы уже используете видео YouTube или Vimeo на своем сайте Beaver Builder, SmartVideo автоматически преобразует все видео, как только вы установите наш плагин WordPress.
• Оптимизация для каждого устройства, а это значит, что ваши видео можно просматривать на любом устройстве и в любом браузере.
• Неограниченная пропускная способность и хранилище
• Быстрое, безбуферное и надежное воспроизведение
• Постоянная поддержка со стороны суперталантливых и дружелюбных разработчиков
• Простая структура ценообразования без сомнительных контрактов
• Аналитика взаимодействия с видео
• Глобальная видео CDN для доставки невероятно быстрого видео пользователям, где бы они ни находились.
• И т.п.

Swarmify SmartVideo меняет правила игры в области ускорения видео. Мы привносим большой опыт работы и знания.

Кроме того, установка SmartVideo на ваш веб-сайт Beaver Builder невероятно проста, как вы узнаете из следующего раздела. Но если вы когда-нибудь застряли, вы всегда можете связаться с нами :) Мы всегда рады помочь.

Давайте быстро установим SmartVideo на ваш сайт Beaver Builder.

NB: для следующего раздела вам понадобится активная учетная запись Swarmify. У вас еще нет аккаунта? Создайте его сегодня и воспользуйтесь эксклюзивной скидкой 50%.

Как интегрировать Swarmify SmartVideo с веб-сайтом Beaver Builder

Поскольку Beaver Builder работает с WordPress, мы будем использовать бесплатный плагин SmartVideo. После создания учетной записи Swarmify загрузите плагин SmartVideo WordPress на свой компьютер.

Затем войдите в панель администратора WordPress и перейдите в «Плагины» > «Добавить новый », как показано ниже.

Затем нажмите кнопку « Загрузить плагин », выберите плагин SmartVideo на своем компьютере и нажмите « Установить сейчас» :

После этого активируйте плагин:

Это еще не все — пришло время связать ваш сайт с вашей учетной записью Swarmify.

Как?

Нажмите SmartVideo в меню администратора WordPress, как показано ниже.

На панели управления SmartVideo нажмите кнопку « Настроить »:

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

Но чтобы избавить вас от проблем, быстро войдите в свою учетную запись Swarmify и скопируйте ключ Swarm CDN вверху:

Вернитесь на страницу конфигурации SmartVideo в WordPress, прокрутите вниз, вставьте ключ Swarm CDN и нажмите «Включить SmartVideo» , как показано ниже.

Это довольно просто; Я не ожидаю, что вы столкнетесь с трудностями. После этого вы должны увидеть зеленую метку « Включено » вверху:

Прежде чем мы узнаем, как добавить видео SmartVideo на ваш веб-сайт Beaver Builder, давайте рассмотрим некоторые настройки SmartVideo, доступные на странице выше.

Перейдите на вкладку « Настройки », как показано на снимке экрана ниже.

Это приведет к следующей странице настроек.

Кратко пробежимся по каждому разделу. Я пронумеровал разделы соответствующим образом для вашего удовольствия.

(1) В самом верху у вас есть возможность включить или выключить SmartVideo. Очевидно, вы хотите, чтобы SmartVideo всегда был включен, чтобы гарантировать наилучшую производительность.

(2) Основные параметры

У вас есть второй раздел с несколькими основными параметрами для настройки вашего проигрывателя SmartVideo и опыта. Доступные варианты включают в себя:

• Включите или выключите автоматическое преобразование YouTube и Vimeo. Установите флажок, чтобы автоматически конвертировать видео YouTube и Vimeo, уже находящиеся на вашем сайте. Включите и оставьте так.
• Отображать скрытые субтитры, когда они доступны из источников YouTube . Если это не является обязательным, оставьте этот флажок снятым.
• Оптимизировать фоновые видео и существующие видео — включите этот параметр, и SmartVideo оптимизирует существующие видео и фоновые видео. Включите и оставьте так.
• Изменить форму кнопки воспроизведения - не требует пояснений. У вас есть три варианта формы: Default (или Hexagon ), Rectangle и Circle . Выберите то, что вам нравится. Форма по умолчанию работает для меня :)
• Выберите цвет, чтобы компоненты видеоплеера соответствовали цветам вашего веб-сайта . Опять же, у вас есть возможность настроить внешний вид вашего видеоплеера на вашем сайте. Выберите свой собственный цвет здесь :)

Ниже у нас...

(3) Дополнительные параметры

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

• Включить или выключить альтернативный метод компоновки . Этот параметр пригодится, если у вас возникают проблемы с размером видео или полноэкранным режимом. Установите флажок.
• Включить или выключить ускорение загрузки . При возникновении проблем с загрузкой видео включите этот параметр.
• (Только план Pro) Установить водяной знак. Здесь вы можете установить изображение или логотип в качестве водяного знака для видеоплеера. Это отлично подходит для целей брендинга, поэтому используйте свое лучшее изображение/логотип.
• (Только план Pro) Добавить URL-адрес объявления VAST . Здесь вы вводите URL-адрес своего объявления, если хотите монетизировать свои видео с помощью рекламы из AdSense, DFP, SpotX и т. д.

После того, как вы сделаете правильные настройки, не забудьте нажать « Сохранить настройки » внизу страницы.

Теперь давайте добавим смарт-видео на вашу страницу в Beaver Builder.

Как добавить SmartVideo на страницу Beaver Builder

Я использую ту же страницу, которую вы показывали ранее, для иллюстрации. Я заменю отмеченное изображение вверху на SmartVideo:

Я позаимствовал видео о запусках SpaceX с канала SpaceX на YouTube. Это то же самое видео в нашей демонстрации (Пожалуйста, проверьте это).

NB: если YouTube является вашим источником, убедитесь, что вы используете ссылку для встраивания (например, https://www.youtube.com/embed/gmJgW-yMAIg ) вместо прямой ссылки для просмотра (например, https://www. youtube.com/watch?v=gmJgW-yMAIg ).

Чтобы найти ссылку для вставки, перейдите под видео и нажмите кнопку « Поделиться »:

После этого нажмите кнопку Embed , как показано ниже.

Затем войдите в появившееся всплывающее окно и скопируйте ссылку для вставки, как мы выделяем ниже.

Видеть? Это было не так сложно.

NB: Другое дело, если вы загружаете видео со своего канала YouTube и для ваших видео установлено значение « частное », измените его на «не в списке ».

С этой преамбулой пойдем дальше.

Откройте свою страницу в Beaver Builder:

Поскольку я заменяю изображение, я должен сначала удалить его, щелкнув значок « Удалить » следующим образом:

Что оставляет меня с пустой колонкой:

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

Затем щелкните значок добавления модуля контента ( + ) плюс вверху:

После этого перетащите блок содержимого SmartVideo туда , куда вы хотите поместить видео:

Перетаскивание модуля SmartVideo вызывает маленькую симпатичную рамку, показанную ниже.

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

Затем нажмите Источник видео , выберите YouTube , вставьте код для встраивания и нажмите Сохранить в следующем порядке:

Хороший. Вы уже можете увидеть желтую шестиугольную кнопку воспроизведения и видеоплеер еще до того, как нажмете «Сохранить».

Нажмите « Готово» вверху, а затем « Опубликовать» :

Совет для профессионалов : вы можете сохранить черновик , если вы все еще работаете над страницей.

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

Без брендинга YouTube, без буферизации и без ссылок, отнимающих ваш трафик. Ах да, "Рекомендуемых видео" тоже нет, когда я ставлю видео на паузу. Кроме того, он загружается довольно быстро :)

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

Я поэкспериментировал с шириной столбца и отредактировал кое-что, и вот что у меня получилось».

Неплохо. В конце концов, чем больше, тем лучше :)

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

Щелкните внутри модуля содержимого SmartVideo в Beaver Builder:

Это приведет вас к следующим параметрам, где вы можете увидеть основные и дополнительные параметры:

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

Это то, что я имею в виду. Идите вперед и нажмите « Основные параметры », что приведет вас сюда:

Вы только посмотрите на это! Множество параметров для управления такими параметрами, как ширина и высота видеопроигрывателя, встроенное воспроизведение видео (отлично подходит для браузера Safari OS) и адаптивный дизайн.

У вас также есть элементы управления, такие как автовоспроизведение (если вы включите это, убедитесь, что ваше видео автоматически воспроизводится без звука) , Приглушен (видео начинается без звука) , Loop (видео продолжает воспроизводиться) и даже один для отключения элементов управления (но не делайте этого, потому что пользователи не смогут воспроизводить, приостанавливать или уменьшать громкость, что раздражает).

Затем у вас есть вкладка « Дополнительно », которая выглядит так:

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

Опять же, как всегда, не забудьте сохранить изменения, когда закончите.

Последние мысли

Beaver Builder — довольно элегантный конструктор страниц. Он мощнее, чем вы могли себе представить поначалу, но как только вы войдете в него и начнете возиться, вы быстро поймете, что у вас есть мощный инструмент для создания любого современного веб-сайта.

Но он не создан для оптимизации или даже ускорения видео; это просто конструктор страниц. Вот тут-то и приходит на помощь решение Swarmify SmartVideo. Мы помогаем вам создавать быстрые и профессиональные видеоролики на ваших веб-сайтах Beaver Builder.

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

Мы ничего не упустили? Звоните нам в любое время, и мы будем рады пообщаться.