O guia completo do Beaver Builder + Swarmify para hospedagem de vídeo

Você usa o Beaver Builder? Nesse caso, o Swarmify ajuda você a fornecer experiências de vídeo rápidas, sem buffer e profissionais em seu site sem gastar muito.

Alimentando mais de um milhão de sites, o Beaver Builder é um popular construtor de páginas de arrastar e soltar entre os usuários do WordPress.

O construtor de páginas é incrivelmente fácil de usar, mas vem com um conjunto exclusivo de recursos que o tornaram querido por iniciantes e especialistas.

Por exemplo, obtive a seguinte página em menos de cinco minutos:

É basicamente um modelo pronto que você pode importar em questão de segundos. Em seguida, substitua as imagens e o texto pelo seu conteúdo e pronto.

Se você não gosta dos modelos do Beaver Builder, pode começar com uma página em branco. Em seguida, arraste e solte os blocos de conteúdo no lugar e forje visualmente o resto da sua página sem escrever HTML ou lutar com códigos de acesso.

No passado, cobrimos outros construtores de páginas, como Divi, Elementor, Brizy e Webflow. Por favor, verifique os guias sempre que puder :)

Hoje, mostramos exatamente como usar o Beaver Builder e o Swarmify para oferecer experiências de vídeo rápidas, sem travamentos e profissionais em seu site.

Sem mais delongas, vamos começar, pois há muito o que aprender.

O que é o Beaver Builder?

Antes de qualquer coisa, vamos aprender mais sobre o Beaver Builder para o primeiro temporizador entre nós.

O Beaver Builder é um construtor de páginas premium do WordPress. A ferramenta ajuda você a criar páginas responsivas do WordPress visualmente.

Isso significa que você cria páginas arrastando e soltando blocos de conteúdo. Você não precisa de experiência anterior em codificação para usar o construtor de páginas Beaver Builder.

Essa é uma ótima notícia para iniciantes e profissionais, pois você pode otimizar seu fluxo de trabalho e economizar muito tempo ao criar sites.

Os maiores nomes do WordPress amam e confiam no Beaver Builder:

A melhor parte do Beaver Builder é o fato de ser tão incrivelmente fácil de usar que você estará construindo sites WordPress em questão de horas e não dias.

E ser fácil de usar não significa que o Beaver Builder não seja tão poderoso quanto outros construtores de páginas. É um construtor de páginas robusto, graças a uma extensa lista de recursos interessantes.

Características, você diz?

Sim, o Beaver Builder possui os seguintes recursos:

• Design 100% responsivo, o que significa que suas páginas ficarão ótimas em vários dispositivos
• Beaver Builder Theme Framework para todos os seus projetos WordPress
• Dezenas de modelos pré-fabricados para criar páginas de destino, páginas iniciais, páginas de conteúdo, etc.
• Construtor de páginas de arrastar e soltar do Beaver Builder
• Grande quantidade de blocos de conteúdo para adicionar texto, imagens, botões, títulos, vídeos, etc.
• Uma tonelada de widgets do WordPress, incluindo o widget SmartVideo
• Configurações globais
• HTML, CSS e JavaScript personalizados, se necessário
• Atalhos do teclado
• Beaver Themer Add-on para personalizar todas as partes do seu site, incluindo cabeçalhos e rodapés
• Controle total sobre o design do seu site
• Compatível com uma ampla variedade de temas WordPress
• Uma versão gratuita disponível como plugin no WordPress.org
• Suporte de classe mundial
• Com capacidade para vários sites
• Marcação branca
• Et cetera

O Beaver Builder é um poderoso construtor de páginas que facilita a criação de sites WordPress bonitos e responsivos. Se for sua primeira vez, você pode experimentar a versão gratuita e atualizar para um plano profissional mais tarde.

Eles oferecem três pacotes de preços perfeitos para proprietários de sites iniciantes, freelancers profissionais e agências criativas. Todos os pacotes permitem que você use o Beaver Builder em um número ilimitado de sites.

Agora que estamos todos na mesma página, vamos passar para o SmartVideo do Swarmify.

O que é o Swarmify SmartVideo?

Swarmify é uma empresa de aceleração de vídeo focada em levar streaming com qualidade Netflix para todos em um pacote simples. Nossa plataforma SmartVideo simplifica todas as partes móveis complexas e caras que envolvem a implantação de vídeo.

O SmartVideo lida automaticamente com upload, codificação, hospedagem e entrega seus vídeos, não importa onde você os armazene, seja YouTube, Dropbox, Amazon S3, Google Cloud e assim por diante.

Por que Swarmify SmartVideo?

A plataforma Swarmify SmartVideo ajuda as empresas a resolver alguns dos problemas mais difíceis em streaming de vídeo: buffer e qualidade de streaming. O SmartVideo também impede que as curtidas do YouTube roubem seu tráfego usando players de vídeo carregados de links.

Graças à nossa solução de entrega, você pode entregar vídeos que são 12x mais rápidos do que a média dos players do setor . A mesma plataforma de entrega também ajuda a reduzir as paralisações em 8x .

“O Swarmify SmartVideo foi lançado em maio de 2017. Temos visto um enorme crescimento a cada mês. Mais empresas estão reconhecendo o custo real de usar o YouTube. Antes do SmartVideo, nossa solução estava disponível apenas para empresas de grande porte. No total, recentemente comemoramos a transmissão de mais de quinhentos milhões de vídeos”, diz Nathan Barnett, CEO da Swarmify. “Se o seu site carrega rápido, mas seu vídeo carrega devagar, você ainda vai perder esse cliente.” Fonte: YourStory.com

O SmartVideo ajuda você a fornecer vídeos rápidos, sem buffer e de alta qualidade no site do Beaver Builder. Oferecemos a você um player de vídeo organizado que não contém links e marcas de terceiros, permitindo que você ofereça experiências de vídeo profissionais aos visitantes do seu site.

Aqui estão alguns dos recursos que fazem do SmartVideo a melhor plataforma de aceleração de vídeo disponível.

• Player de vídeo limpo e livre de distrações - o YouTube e outras plataformas enchem seu player com links para desviar seu tráfego. O player SmartVideo é limpo, personalizável e sem vazamentos.
• Conversões automáticas do YouTube e Vimeo - Se você já usa vídeos do YouTube ou Vimeo em seu site Beaver Builder, o SmartVideo converterá automaticamente todos os vídeos assim que você instalar nosso plugin WordPress.
• Otimizado em todos os dispositivos, o que significa que seus vídeos podem ser visualizados em qualquer dispositivo e navegador.
• Largura de banda e armazenamento ilimitados
• Reprodução rápida, sem buffer e à prova de travamento
• Suporte contínuo fornecido por desenvolvedores super talentosos e amigáveis
• Estrutura de preços simples sem contratos obscuros
• Análise de engajamento de vídeo
• CDN de vídeo global para fornecer vídeos extremamente rápidos aos usuários, não importa onde eles estejam no mundo
• etc.

Swarmify SmartVideo é um divisor de águas no campo de aceleração de vídeo. Trazemos muita experiência de trabalho e conhecimento para a mesa.

Além disso, instalar o SmartVideo no site do Beaver Builder é incrivelmente fácil, como você aprenderá na próxima seção. Mas se você estiver preso, você sempre pode entrar em contato conosco :) Estamos sempre felizes em ajudar.

Movendo-se rapidamente, vamos instalar o SmartVideo no seu site do Beaver Builder.

NB: Para a próxima seção, você precisará de uma conta Swarmify ativa. Não tem uma conta ainda? Crie um hoje e aproveite seu desconto exclusivo de 50%.

Como integrar o Swarmify SmartVideo com um site do Beaver Builder

Como o Beaver Builder funciona com o WordPress, usaremos o plug-in SmartVideo gratuito . Depois de criar sua conta Swarmify, baixe o plugin SmartVideo WordPress para o seu computador.

Em seguida, faça login no painel de administração do WordPress e navegue até Plugins > Adicionar novo , conforme mostrado abaixo.

Em seguida, clique no botão Carregar plug -in, selecione o plug-in SmartVideo do seu computador e clique em Instalar agora :

Depois disso, ative o plugin:

Ainda não chegamos lá - é hora de conectar seu site à sua conta Swarmify.

Como?

Clique em SmartVideo no menu de administração do WordPress, conforme destacamos abaixo.

No painel SmartVideo, clique no botão Configurar :

Fazer isso leva você à página de configuração a seguir, que contém instruções e um GIF interativo mostrando exatamente o que você precisa fazer em seguida.

Mas para evitar problemas, faça login rapidamente na sua conta Swarmify e copie a chave Swarm CDN na parte superior:

Volte para a página de configuração do SmartVideo no WordPress, role para baixo, cole a chave Swarm CDN e clique em Enable SmartVideo , conforme mostrado abaixo.

É bastante simples; Não espero que você enfrente dificuldades. Uma vez feito, você deve ver o rótulo verde Ativado na parte superior:

Antes de aprendermos como adicionar um vídeo SmartVideo ao site do Beaver Builder, vamos abordar algumas das configurações SmartVideo disponíveis na página acima.

Clique na guia Configurações , como destacamos na captura de tela abaixo.

Fazer isso leva à página de configurações a seguir.

Passemos brevemente por cada seção. Numerei as seções apropriadamente para seu prazer.

(1) No topo, você tem a opção de ativar ou desativar o SmartVideo. Obviamente, você deseja manter o SmartVideo sempre ativado para garantir o melhor desempenho.

(2) Opções básicas

Você tem a segunda seção com algumas opções básicas para personalizar seu player e experiência SmartVideo. As opções disponíveis incluem:

• Ative ou desative as conversões automáticas do YouTube e Vimeo - Marque a caixa de seleção para converter vídeos do YouTube e Vimeo que já estão em seu site automaticamente. Ligue e deixe assim.
• Exibir legendas ocultas quando disponíveis em fontes do YouTube - a menos que seja essencial, deixe esta caixa de seleção desmarcada.
• Otimizar vídeos em segundo plano e vídeos existentes - Ative isso e o SmartVideo otimizará os vídeos existentes e os vídeos em segundo plano. Ligue e deixe assim.
• Altere a forma do botão play - Auto-explicativo. Você tem três opções de forma: Padrão (ou Hexágono ), Retângulo e Círculo . Escolha o que quiser. A forma padrão funciona para mim :)
• Escolha uma cor para combinar os componentes do player de vídeo com as cores do seu site - Mais uma vez, você tem a chance de personalizar a aparência do player de vídeo em seu site. Escolha sua cor personalizada aqui :)

Abaixo disso temos...

(3) Opções avançadas

Quando você carrega a página de configurações, a seção Opções avançadas é recolhida. Clique no título para carregar a seção, que oferece as seguintes opções.

• Ativar ou desativar o método de layout alternativo - Essa opção é útil se você tiver problemas de tamanho de vídeo estranho ou de tela cheia. Marque a caixa de seleção.
• Ativar ou desativar a aceleração de upload - Se tiver problemas com seus uploads de vídeo, ative esta opção.
• (Somente Plano Pro) Definir uma marca d'água - Aqui, você pode definir uma imagem ou logotipo como marca d'água para o player de vídeo. Isso é ótimo para fins de branding, então use sua melhor imagem/logotipo.
• (Somente plano Pro) Adicionar URL do anúncio VAST - Aqui é onde você insere o URL do anúncio se quiser gerar receita com seus vídeos com anúncios do AdSense, DFP, SpotX e assim por diante.

Depois de ter as configurações corretas, não se esqueça de clicar em Salvar configurações na parte inferior da página.

Com isso fora do caminho, vamos adicionar um vídeo inteligente à sua página do Beaver Builder.

Como adicionar SmartVideo a uma página do Beaver Builder

Estou usando a mesma página que você mostrou anteriormente para fins de ilustração. Estarei substituindo a imagem marcada na parte superior por um SmartVideo:

Peguei emprestado o vídeo SpaceX Launches do canal SpaceX no YouTube. É o mesmo vídeo em nossa demonstração (Por favor, confira).

NB: Se o YouTube for sua fonte, verifique se você está usando o link de incorporação (ou seja, https://www.youtube.com/embed/gmJgW-yMAIg ) em vez do link de exibição direto (ou seja, https://www. youtube.com/watch?v=gmJgW-yMAIg ).

Para encontrar o link de incorporação, vá abaixo do vídeo e clique no botão Compartilhar :

Depois disso, clique no botão Incorporar , conforme mostrado abaixo.

Em seguida, entre no pop-up que aparece e copie o link de incorporação, conforme destacamos abaixo.

Ver? Isso não foi tão difícil.

NB: Outra coisa, se você estiver obtendo vídeos do seu canal do YouTube e seus vídeos estiverem definidos como " privados ", altere para " não listado ".

Com esse preâmbulo, vamos em frente.

Abra sua página no Beaver Builder:

Como estou substituindo a imagem, devo excluí-la primeiro clicando no ícone Remover da seguinte forma:

O que me deixa com uma coluna vazia:

Dica profissional : você pode pular a etapa acima se não estiver substituindo uma imagem como no meu caso. Apenas certifique-se de ter uma coluna ou linha vazia onde você está adicionando seu vídeo. Se você já usou o Beaver Builder antes, isso não deve ser um problema.

Em seguida, clique no ícone de adição de módulo de conteúdo ( + ) na parte superior:

Depois disso, arraste e solte o bloco de conteúdo SmartVideo onde deseja colocar o vídeo:

Arrastar e soltar o módulo SmartVideo traz a pequena caixa mostrada abaixo.

Esta caixa permite que você faça muitas coisas. Por exemplo, ele permite que você escolha sua fonte de vídeo e controle algumas opções básicas e avançadas - mais sobre isso em um minuto.

Em seguida, clique em Fonte de vídeo , escolha YouTube , cole seu código de incorporação e clique em Salvar , nesta ordem:

Agradável. Você já pode ver o botão de reprodução do hexágono amarelo e o player de vídeo antes mesmo de clicar em salvar.

Clique em Concluído na parte superior e depois em Publicar :

Dica profissional : você pode salvar rascunho se ainda estiver trabalhando na página.

Se eu verificar meu vídeo inteligente no frontend, verei o vídeo no player de vídeo organizado. O vídeo já está otimizado e acelerado pelo Swarmify, como você pode ver abaixo.

Sem marca do YouTube, sem buffer e sem links que desviam seu tráfego. Ah, sim, também não há "vídeos recomendados" quando pauso o vídeo. Além disso, carrega muito rápido :)

Mas parece estranhamente pequeno, mas isso é porque não alterei a largura da minha coluna no Beaver Builder. Você pode alterar as larguras das colunas e mover as coisas até obter o tamanho certo.

Brinquei com a largura da minha coluna e editei alguns conteúdos, e foi isso que consegui"

Nada mal. Afinal, maior é melhor :)

Agora vamos falar sobre as opções básicas e avançadas que mencionamos um segundo atrás. Você sabe? Quando estávamos adicionando o vídeo e aquela linda caixinha apareceu?

Clique dentro do módulo de conteúdo SmartVideo dentro do Beaver Builder:

Fazer isso leva você às seguintes opções, onde você pode ver as opções Básicas e Avançadas:

Ao contrário das opções básicas e avançadas que abordamos quando conectamos seu site à sua conta Swarmify, as opções acima permitem que você personalize como o jogador se comporta, por falta de uma palavra melhor.

É isso que eu quero dizer. Vá em frente e clique em Opções básicas , que o leva até aqui:

Basta olhar para isso! Muitas opções para controlar coisas como largura e altura do player de vídeo, reproduzir vídeo inline (ótimo para o navegador Safari OS) e design responsivo.

Você também tem controles como Reprodução automática (se você ativar isso, certifique-se de que seu vídeo seja reproduzido automaticamente sem som) , Silenciado (o vídeo começa sem som) , Loop (o vídeo continua sendo reproduzido) e até mesmo um para desligar os controles (mas não faça isso porque os usuários não poderão reproduzir, pausar ou diminuir o volume, o que é irritante).

Então você tem a guia Avançado , que se parece com isso:

Novamente, um monte de opções para personalizar ainda mais seu player de vídeo. Você adiciona animações (faz com que o vídeo salte quando a página é carregada), define o espaçamento ao redor do player de vídeo e muito mais.

Novamente, como sempre, não se esqueça de salvar suas alterações quando terminar.

Pensamentos finais

O Beaver Builder é um construtor de páginas bastante elegante. É poderoso além do que você imagina a princípio, mas quando você entra lá e começa a mexer, percebe rapidamente que tem uma ferramenta formidável para criar qualquer site moderno.

Mas não foi desenvolvido para otimização de vídeo ou mesmo aceleração; é apenas um construtor de páginas. É aí que entra a solução Swarmify SmartVideo. Ajudamos você a oferecer experiências de vídeo rápidas e profissionais em seus sites Beaver Builder.

Tudo sem os altos custos, limites e desafios técnicos que acompanham a maioria dos hosts de vídeo.

Deixamos alguma coisa de fora? Entre em contato a qualquer momento e teremos o maior prazer em conversar.