O Guia Completo do Webflow + Swarmify para Hospedagem de Vídeo

Você usa o Webflow? Nesse caso, o Swarmify oferece exatamente o que você precisa para oferecer experiências de vídeo super-rápidas e de alta qualidade.

O que é um bom conteúdo? O que é uma página de destino? O que é um site?

Já se foram os dias em que criar sites era exclusividade dos desenvolvedores web de dragões cuspidores de fogo.

Hoje em dia, você pode criar sites incríveis no tempo que leva para o próximo cara terminar um sanduíche.

Graças a criadores de sites como o Webflow, você não precisa saber nada sobre codificação para criar sites notáveis ​​em um instante.

Para o post de hoje, criei um site de exemplo ( você verá em um minuto ) em menos de 30 minutos! E eu não sou o que você chamaria de um desenvolvedor web profissional. Nem nos meus sonhos :)

Ferramentas como o Webflow removeram muitos dos obstáculos que impediam que pessoas não conhecedoras de tecnologia, como você e eu, construíssem sites.

Agora...

Se você usa vídeos em seu site do Webflow, deseja que eles sejam carregados rapidamente e sem travamentos.

Você deseja oferecer a seus usuários apenas as melhores experiências de visualização, e nada menos que isso.

Vídeos lentos que são armazenados em buffer durante a reprodução apenas irritarão seus visitantes e os enviarão correndo para as colinas e direto para os braços de seus concorrentes.

Você não quer isso porque você é inteligente. Além disso, porque agora você tem a tecnologia SmartVideo da Swarmify à sua disposição.

O SmartVideo permite que você ofereça experiências de vídeo totalmente personalizadas e profissionais aos seus usuários.

Você pode entregar vídeos que são 12x mais rápidos do que a média dos players do setor. Melhor ainda, a solução proprietária de entrega SmartVideo reduz as paralisações em 8x.

E no post de hoje, mostramos exatamente como integrar o Swarmify ao Webflow para acelerar vídeos para melhor engajamento do usuário e mais vendas!

Sem mais delongas, vamos levantar âncora e zarpar :)

O que é Webflow?

Então, o que é esse animal que estamos chamando de Webflow? Para os não iniciados, a Webflow é uma empresa americana com sede em São Francisco.

Eles oferecem plataforma de Software como Serviço (SaaS) para criação e hospedagem de sites, tudo agrupado em um pacote.

O Webflow oferece a você um construtor de sites de arrastar e soltar que é muito fácil de usar. Além disso, eles oferecem vários recursos que tornam a criação de sites responsivos tão fácil quanto o abracadabra.

Quando seu site estiver pronto, você não precisará procurar outro lugar para hospedagem na web. O Webflow oferece hospedagem de última geração que é perfeita para todas as empresas, grandes e pequenas.

Grandes marcas como Zendesk, Dell, Rakuten e Upwork, entre outras, confiam no Webflow, o que significa que você está em boas mãos.

Cá entre nós, nunca usei um construtor de sites tão intuitivo antes. O Webflow tira empresas como Weebly, Squarespace e Wix completamente fora da água.

E eles bebem seu próprio Kool-Aid também. O site oficial do Webflow é feito, você adivinhou - Webflow!

Principais recursos do Webflow

O Webflow é popular e mais conhecido pelos seguintes recursos principais.

• Um construtor de sites intuitivo de arrastar e soltar que permite criar sites visualmente
• Dezenas de lindos modelos prontos que você pode personalizar até cair
• Toneladas de elementos do site
• Funcionalidade de comércio eletrônico
• Hospedagem Amazon S3 super-rápida e robusta
• Estilos ilimitados
• Capacidade de adicionar código HTML, CSS e JS personalizado
• Planos de preços flexíveis
• Poderoso sistema de gerenciamento de conteúdo (CMS)
• Muitas integrações de terceiros
• Plano gratuito para testar as águas
• Muitas interações e animações
• Conecte o nome de domínio personalizado
• Use seu subdomínio, por exemplo, swarmify.webflow.io para hospedar um site gratuito
• Suporte profissional

Se você é um desenvolvedor web front-end (ou apenas o joe comum) procurando um construtor de sites fácil de usar, mas poderoso, o Webflow é altamente recomendado.

É a ferramenta perfeita para economizar tempo e otimizar seu dia de trabalho já ocupado. Se você já é usuário do Webflow, já sabe que o Webflow é um construtor de sites perfeito.

Ainda assim, eles não oferecem as ferramentas certas para otimizar vídeos. Se você usa o YouTube, o player de vídeo em seu site Webflow ainda mostrará a marca irritante do YouTube e links que distraem seus usuários e roubam seu tráfego.

E enquanto o Webflow usa hospedagem rápida, os vídeos que você usa do YouTube ou de qualquer outra fonte serão armazenados em buffer e ainda demorarão para carregar.

É aqui que entra o Swarmify. Oferecemos exatamente o que você precisa para otimizar vídeos em seu site Webflow, esteja você usando o YouTube, Vimeo ou qualquer outro site para hospedar seus vídeos.

O que é Swarmify?

O Swarmify foi lançado em 2013 como uma plataforma de aceleração de vídeo. O serviço é executado na mesma infraestrutura que gigantes de streaming como Netflix e Hulu usam.

Você pode armazenar seus vídeos onde quiser e usar o SmartVideo do Swarmify para entregar vídeos aos seus usuários em velocidades extremamente rápidas.

Aqui está um cenário de exemplo para ilustrar o que quero dizer:

• Carregue vídeos para o YouTube ou Vimeo para obter benefícios sociais e incorpore em seu site como sempre
• Integre o SmartVideo ao seu site usando nosso plugin WordPress ou trecho rápido
• O SmartVideo baixa seus vídeos do YouTube/Vimeo nos bastidores e os envia para nossa rede global de entrega
• O SmartVideo oferece seus vídeos agora mais rápidos em um player de vídeo organizado que parece incrível
• Tudo acontece em segundo plano automaticamente . Na verdade, o SmartVideo converte todos os vídeos do YouTube em seu site automaticamente. Instale uma vez e pronto!

O SmartVideo usa o EdgeAI interno para evitar travamentos durante a reprodução e uma solução SmartCDN que garante que seus visitantes desfrutem de vídeos rápidos e sem buffer em qualquer lugar do mundo.

Se você usa muitos vídeos, velocidades lentas podem matar o engajamento e levar a menos vendas. SmartVideo ajuda você a contornar este problema sem grandes contas e limites de armazenamento/largura de banda.

Principais recursos do Swarmify

Os usuários do Swarmify adoram o SmartVideo graças aos seguintes recursos.

• Leitor de vídeo limpo, sem desordem e sem distrações
• Início instantâneo - os vídeos SmartVideo começam a ser reproduzidos 12x mais rápido do que outros players em média (veja nossa demonstração aqui)
• Experiência de visualização otimizada em vários dispositivos
• Conversões automáticas do YouTube/Vimeo - Já hospeda vídeos no YouTube ou Vimeo? SmartVideo converte-os automaticamente
• Otimização de streaming contínuo - Durante a reprodução, o SmartVideo monitora continuamente a experiência de vídeo de cada usuário individual e evita falhas antes que elas ocorram.
• Reprodução sem travamento - O SmartVideo oferece 8x menos buffering durante a reprodução do que outros players em média.
• Tudo ilimitado - Desfrute de largura de banda e armazenamento ilimitados
• Suporte profissional apoiado por uma equipe de desenvolvedores apaixonados
• Fácil instalação e implementação
• Leia mais sobre nossos recursos aqui

O vídeo é uma parte crítica do marketing digital. Você não pode ignorar os incríveis benefícios de usar o vídeo como estratégia de marketing.

Dito isso, a velocidade de carregamento do seu vídeo faz parte do fornecimento de uma melhor experiência ao usuário em seu site.

Para oferecer experiências de vídeo rápidas e sem atrasos em seu site Webflow, você precisa de uma solução como o SmartVideo.

Com vídeos rápidos, você desfruta de uma melhor retenção de usuários, mais conversões, taxas de rejeição mais baixas e mais vendas. É um acéfalo.

Além disso, quem quer assistir a um vídeo que leva uma eternidade e uma viagem ao redor do sol para carregar?

Absolutamente ninguém! Nem mesmo você.

Fora isso, vamos integrar o Swarmify ao seu site Webflow para acelerar seus vídeos e colocar um sorriso no rosto de seus estimados clientes.

N/B: Para integrar o Swarmify ao Webflow, você precisa de uma conta Swarmify ativa e um plano pago no Webflow.

Ainda em cima do muro? Não seja . Inscreva-se no Swarmify hoje e aproveite nosso desconto exclusivo de 50% . Curioso? Saiba mais aqui.

Dito isso, vamos integrar a hospedagem de vídeo do Swarmify ao seu site Webflow.

Como adicionar Swarmify ao Webflow

'Antes de chegarmos ao Webflow, vamos primeiro configurar seu snippet SmartVideo. Vá em frente, faça login no seu painel Swarmify e clique em Configuração , conforme mostrado abaixo.

Em seguida, escolha se você tem vídeos do YouTube em seu Webflow:

Escolher Sim acima garante que o SmartVideo converta todos os vídeos do YouTube em seu site Webflow automaticamente. Aperte o botão Avançar .

Na próxima tela, escolha se o seu site Webflow tem vídeos em segundo plano:

Deseja alterar as cores do seu player de vídeo para corresponder ao seu site Webflow? Você pode fazer isso na próxima tela:

Clique em Avançar .

Em seguida, você pode alterar a forma do botão de reprodução, se desejar. Eu prefiro o botão hexagonal padrão, mas você tem a opção de escolher retângulo ou círculo:

Em seguida, escolha uma marca d'água personalizada para seus vídeos:

Você é bom nisso, devo admitir :)

Clique em Avançar .

Na próxima tela, escolha se deseja vender anúncios em seus vídeos e clique em Concluir :

Por fim, clique em Copiar para a área de transferência , conforme mostrado abaixo.

Agora, seu snippet SmartVideo está pronto para seu site Webflow.

Qual o proximo?

Vamos agora adicionar o Swarmify ao seu site Webflow.

Aqui está o site de exemplo com o qual estou trabalhando, conforme prometido:

Peguei emprestado o famoso vídeo Jerusalema da Openmic Productions. Ótima música e vídeo, por sinal. Em todo o mundo, as pessoas estão fazendo o desafio de dança Jerusalema .

Como eu gostaria de dançar.

Continuando, vamos adicionar o Swarmify ao seu site Webflow.

Faça login no Webflow:

Insira os detalhes e pressione o botão Entrar :

Em seguida, clique no site onde deseja adicionar o SmartVideo:

Agora, você está dentro do construtor de sites intuitivo sobre o qual falamos anteriormente:

Mas não adicionaremos o snippet SmartVideo a uma única página. Queremos que o snippet se aplique a todo o site.

Então, o que eu faço Freddy?

Clique no ícone Webflow (W) (se transforma em um menu de hambúrguer quando você passa o mouse):

Em seguida, clique em Configurações do projeto :

Depois disso, clique em Custom Code :

Sim.

Em seguida, cole o snippet SmartVideo que você copiou anteriormente na seção Head Code e clique em Save Changes da seguinte forma:

Com esse snippet, seu Webflow está conectado ao Swarmify. Todos os vídeos do YouTube em seu site serão convertidos automaticamente :)

Feito.

O resultado?

Este:

Observe o novo player de vídeo sem marca de terceiros.

Lembre -se: se estiver usando o YouTube, use a incorporação em vez do link direto, ou seja, https://www.youtube.com/embed/fCZVL_8D048 versus https://www.youtube.com/watch?v=fCZVL_8D048 .

Dica profissional : Por favor, use o link de incorporação. Certifique-se de estar usando o link de incorporação ao adicionar vídeos ao seu site do Webflow.

Hospedando vídeos em outro lugar?

SmartVideo está de costas

Veja os 9 melhores sites de upload de vídeo e serviços de armazenamento em nuvem.

Aqui está um link compartilhável : https://swarmify.com/blog/top-video-upload-sites-cloud-storage-services/.

Adicionando tags SmartVideo

Você pode adicionar um vídeo SmartVideo em qualquer lugar do seu site Webflow usando uma tag SmartVideo:

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

Abra a página do Webflow que você deseja editar. Para o nosso exemplo, substituirei a seção Hero pelo mesmo vídeo de Jerusalém que usamos anteriormente. Desta vez, no entanto, usarei a tag SmartVideo acima.

Veja como fica minha tag SmartVideo pronta:

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

Observe que substituo path/to/my/video.mp4 pelo link de incorporação do vídeo.

Em seguida, clique em Adicionar (+) e escolha Incorporar , conforme mostrado abaixo:

Em seguida, cole sua tag SmartVideo e clique em Salvar e fechar :

Agora, quando verifico meu site de amostra no frontend, vejo o vídeo convertido:

Tão fácil quanto A, B, C.

Diga tchau?

Os usuários do Webflow acharão o SmartVideo super útil. SmartVideo acelera seus vídeos para uma melhor experiência do usuário.

O Swarmify SmartVideo oferece vídeos 12x mais rápidos do que a média do setor. Você aumentará suas conversões e vendas com vídeos mais rápidos.

Até a próxima, crie mais vídeos e acelere-os com o SmartVideo da Swarmify :)