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

Используете ли вы Webflow? Если это так, Swarmify предлагает вам именно то, что вам нужно для обеспечения сверхбыстрого и высококачественного видео.

Что такое хороший контент? Что такое целевая страница? Что такое веб-сайт?

Прошли те времена, когда создание веб-сайтов было прерогативой огнедышащих драконов веб-разработчиков.

В настоящее время вы можете создать невероятные веб-сайты за то время, которое требуется следующему парню, чтобы съесть бутерброд.

Благодаря конструкторам веб-сайтов, таким как Webflow, вам не нужно ничего знать о кодировании, чтобы создавать замечательные веб-сайты в один миг.

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

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

В настоящее время...

Если вы используете видео на своем веб-сайте Webflow, вы хотите, чтобы они загружались быстро и без зависаний.

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

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

Ты не хочешь этого, потому что ты умный. Кроме того, потому что теперь в вашем распоряжении технология Swarmify SmartVideo.

SmartVideo позволяет предлагать пользователям полностью персонализированные и профессиональные видеоматериалы.

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

И в сегодняшнем посте мы покажем вам, как именно интегрировать Swarmify с Webflow, чтобы ускорить видео для повышения вовлеченности пользователей и увеличения продаж!

Без лишних слов, давайте снимем якорь и отправимся в плавание :)

Что такое вебфлоу?

Итак, что это за зверь, которого мы называем Webflow? Для непосвященных Webflow — американская компания, базирующаяся в Сан-Франциско.

Они предлагают платформу «Программное обеспечение как услуга» (SaaS) для создания и хостинга веб-сайтов, все в одном пакете.

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

Когда ваш веб-сайт будет готов, вам не нужно искать хостинг в другом месте. Webflow предлагает вам первоклассный хостинг, который идеально подходит для всех компаний, больших и малых.

Известные бренды, такие как Zendesk, Dell, Rakuten и Upwork, доверяют Webflow, а это значит, что вы в надежных руках.

Между вами и мной, я никогда раньше не использовал такой интуитивно понятный конструктор сайтов. Webflow полностью выбивает такие компании, как Weebly, Squarespace и Wix.

И они тоже пьют свой Kool-Aid. Официальный сайт Webflow сделан, как вы уже догадались, в Webflow!

Ключевые особенности веб-потока

Webflow популярен и наиболее известен благодаря следующим ключевым функциям.

• Интуитивно понятный конструктор веб-сайтов с функцией перетаскивания, который позволяет создавать веб-сайты визуально.
• Десятки красивых готовых шаблонов, которые можно настраивать до упаду
• Тонны элементов веб-сайта
• Функциональность электронной коммерции
• Сверхбыстрый и надежный хостинг Amazon S3
• Неограниченные стили
• Возможность добавления пользовательского кода HTML, CSS и JS.
• Гибкие тарифные планы
• Мощная система управления контентом (CMS)
• Множество сторонних интеграций
• Бесплатный план для проверки воды
• Множество взаимодействий и анимации
• Подключить собственное доменное имя
• Используйте их субдомен, например, swarmify.webflow.io , для размещения бесплатного веб -сайта.
• Профессиональная поддержка

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

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

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

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

Вот тут-то и появляется Swarmify. Мы предлагаем вам именно то, что вам нужно для оптимизации видео на вашем веб-сайте Webflow, независимо от того, используете ли вы YouTube, Vimeo или любой другой сайт для размещения своих видео.

Что такое Swarmify?

Swarmify был запущен еще в 2013 году как платформа для ускорения видео. Сервис работает на той же инфраструктуре, которую используют такие гиганты потокового вещания, как Netflix и Hulu.

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

Вот пример сценария, чтобы проиллюстрировать, что я имею в виду:

• Загрузите видео на YouTube или Vimeo для получения социальных преимуществ и вставьте на свой веб-сайт, как обычно.
• Интегрируйте SmartVideo со своим веб-сайтом с помощью нашего плагина WordPress или быстрого фрагмента кода.
• SmartVideo загружает ваши видео с YouTube/Vimeo за кулисами и загружает их в нашу глобальную сеть доставки
• SmartVideo доставляет ваши теперь более быстрые видео в простой видеоплеер, который выглядит потрясающе
• Все происходит в фоновом режиме автоматически . Фактически, SmartVideo автоматически конвертирует все видео YouTube на вашем сайте. Установите один раз и все!

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

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

Ключевые особенности Swarmify

Пользователи Swarmify любят SmartVideo благодаря следующим функциям.

• Чистый видеоплеер без помех и отвлекающих факторов
• Мгновенный запуск — видеоролики SmartVideo начинают воспроизводиться в среднем в 12 раз быстрее, чем другие проигрыватели (см. нашу демонстрацию здесь)
• Оптимизированный опыт просмотра на нескольких устройствах
• Автоматическое преобразование YouTube/Vimeo — Уже размещаете видео на YouTube или Vimeo? SmartVideo конвертирует их автоматически
• Непрерывная оптимизация потоковой передачи. Во время воспроизведения SmartVideo постоянно отслеживает качество видео каждого отдельного пользователя и предотвращает сбои до их возникновения.
• Воспроизведение без остановок — SmartVideo обеспечивает в 8 раз меньшую буферизацию во время воспроизведения, чем в среднем другие проигрыватели.
• Неограниченное все - Наслаждайтесь неограниченной пропускной способностью и хранилищем
• Профессиональная поддержка, поддерживаемая командой увлеченных разработчиков
• Простота установки и внедрения
• Подробнее о наших возможностях читайте здесь

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

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

Чтобы обеспечить быстрое воспроизведение видео без задержек на веб-сайте Webflow, вам необходимо такое решение, как SmartVideo.

С быстрыми видео вы получаете лучшее удержание пользователей, больше конверсий, более низкий показатель отказов и больше продаж. Это не просто.

Кроме того, кому захочется смотреть видео, на загрузку которого уходит вечность и путешествие вокруг солнца?

Абсолютно никто! Даже не ты.

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

N/B: для интеграции Swarmify с Webflow вам потребуется активная учетная запись Swarmify и платный тарифный план Webflow.

Все еще на заборе? Не будь . Зарегистрируйтесь в Swarmify сегодня и воспользуйтесь нашей эксклюзивной скидкой 50% . Любопытный? Узнайте больше здесь.

Тем не менее, позвольте нам интегрировать видеохостинг Swarmify с вашим веб-сайтом Webflow.

Как добавить Swarmify в Webflow

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

Затем выберите, есть ли у вас видео YouTube в вашем Webflow:

Выбрав « Да » выше, SmartVideo автоматически конвертирует все видео YouTube на вашем веб-сайте Webflow. Нажмите кнопку « Далее ».

На следующем экране выберите, есть ли на вашем сайте Webflow фоновые видео:

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

Нажмите « Далее ».

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

Затем выберите собственный водяной знак для своих видео:

У тебя это хорошо получается, надо признать :)

Нажмите « Далее ».

На следующем экране выберите, хотите ли вы продавать рекламу в своих видео, и нажмите « Готово »:

Наконец, нажмите «Копировать в буфер обмена », как показано ниже.

Теперь ваш фрагмент SmartVideo готов для вашего веб-сайта Webflow.

Что дальше?

Теперь мы добавим Swarmify на ваш веб-сайт Webflow.

Вот пример веб-сайта, с которым я работаю, как и обещал:

Я позаимствовал известное видео Иерусалима у Openmic Productions. Отличная песня и клип, кстати. Во всем мире люди участвуют в танцевальном конкурсе Jerusalema .

Как бы я хотел танцевать.

Двигаясь дальше, давайте добавим Swarmify на ваш веб-сайт Webflow.

Войдите в Webflow:

Введите их данные и нажмите кнопку « Войти »:

Затем щелкните веб-сайт, на который вы хотите добавить SmartVideo:

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

Но мы не будем добавлять фрагмент SmartVideo на одну страницу. Мы хотим, чтобы фрагмент применялся ко всему веб-сайту.

Итак, что мне делать, Фредди?

Щелкните значок Webflow (W) (превращается в меню-гамбургер при наведении курсора):

Затем нажмите «Настройки проекта» :

После этого нажмите «Пользовательский код» :

Ага.

Затем вставьте скопированный ранее фрагмент SmartVideo в раздел Head Code и нажмите « Сохранить изменения » следующим образом:

С этим фрагментом ваш Webflow подключен к Swarmify. Все видео YouTube на вашем сайте будут конвертированы автоматически :)

Сделанный.

Результат?

Этот:

Обратите внимание на новый видеоплеер без стороннего брендинга.

Помните : если вы используете YouTube, используйте вставку вместо прямой ссылки, т. е. https://www.youtube.com/embed/fCZVL_8D048 вместо https://www.youtube.com/watch?v=fCZVL_8D048 .

Совет для профессионалов : используйте ссылку для вставки. Убедитесь, что вы используете ссылку для встраивания при добавлении видео на свой веб-сайт Webflow.

Хостинг видео в другом месте?

SmartVideo прикрывает вашу спину

См. 9 лучших сайтов для загрузки видео и сервисов облачного хранения.

Вот общая ссылка : https://swarmify.com/blog/top-video-upload-sites-cloud-storage-services/.

Добавление тегов SmartVideo

Вы можете добавить видео SmartVideo в любое место на своем веб-сайте Webflow, используя тег SmartVideo:

 <smartvideo src="path/to/my/video.mp4" width="1280" height="720" class="swarm-fluid" controls></smartvideo>

Откройте страницу Webflow, которую вы хотите отредактировать. В нашем примере я заменю раздел «Герой» тем же видео Иерусалима , которое мы использовали ранее. Однако на этот раз я буду использовать тег SmartVideo выше.

Вот как выглядит мой готовый тег SmartVideo:

 <smartvideo src="https://www.youtube.com/embed/fCZVL_8D048" width="1280" height="720" class="swarm-fluid" controls></smartvideo>

Обратите внимание, что я заменил path/to/my/video.mp4 ссылкой для встраивания видео.

Затем нажмите « Добавить» (+) и выберите «Встроить », как показано ниже:

Затем вставьте тег SmartVideo и нажмите « Сохранить и закрыть »:

Теперь, когда я проверяю свой образец веб-сайта во внешнем интерфейсе, я вижу преобразованное видео:

Легко, как А, В, С.

Говорят до свидания?

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

Swarmify SmartVideo обеспечивает видео в 12 раз быстрее, чем в среднем по отрасли. Вы увеличите свои конверсии и продажи с более быстрыми видео.

До следующего раза, создавайте больше видео и ускоряйте их с помощью Swarmify SmartVideo :)