Em uma postagem de alguns meses atrás, nós mostramos como fazer uso dos vídeos no seu site Squarespace mais facilmente –  tanto como vídeo de plano de fundo ou como um clipe incorporado.

No post de hoje, vamos mostrar pra você qual a melhor maneira de colecionar os vídeos dos seus usuários e visitantes do site colocando um gravador de vídeo e um widget de upload diretamente no seu site.

Nós fazemos isto com a ajuda da API de câmera HTML5 Clipchamp – uma ferramenta de captura de vídeo que pode ser utilizada em qualquer tipo de site como, por exemplo, para colecionar depoimentos em vídeo dos seus clientes se você tem uma loja online, para aceitar vídeos enviados em competições ou para receber comentários em vídeo dos seus leitores no seu blog.

Seguindo nosso tutorial, é bem simples instalar no seu site Squarespace, mesmo sem nenhum conhecimento técnico ou especializado.

Criar e adicionar um gravador de vídeo Squarespace

Você decide se seus visitantes podem gravar com suas respectivas webcams diretamente no seu site, selecionar & enviar os vídeos já existentes em algum dispositivo deles, ou você também pode oferecer ambas as opções, de modo que eles possam escolher qual delas eles preferem.

Devido à exclusiva tecnologia que criamos, todos os nossos vídeos são diretamente enviados dos dispositivos dos seus usuários para um destino de armazenamento em nuvem selecionado por você, sem passar pela nossa infraestrutura. Isto ajuda a proteger a sua privacidade e a dos seus usuários.

 

squarespace-video-recorder

 

Com relação a um destino de upload, os vídeos podem ser enviados para a sua conta YouTube, Dropbox, Google Drive, Amazon S3 ou Microsoft Azure.

Para exibir os clipes no seu site depois que as pessoas fazem o upload para você, o mais sensato é enviá-los para o YouTube já que você pode incorporá-los de lá mesmo, através das telas de admin do Squarespace.

E agora, aqui estão os passos para colocar seu gravador de vídeo Squarespace no lugar:

1) Acesse a interface de admin. do seu site

Isto é necessário porque você vai precisar criar uma página nova de amostra para copiar alguns códigos no HTML dela.

 

Squarespace login

 

2) Em uma 2ª guia do navegador, crie a sua conta grátis de avaliação da API de vídeo Clipchamp

O registro de uma conta de avaliação grátis da nossa API é necessário para a aquisição da sua chave de API exclusiva que você vai precisar em um próximo passo e para habilitar um destino de upload para os vídeos que você vai receber. Você não precisa de cartão de crédito para registrar-se, e pode cancelar a sua conta de avaliação quando quiser.

 

register-clipchamp-trial

 

3) Configure o YouTube como alvo do upload para enviar vídeos do usuário

Depois de abrir a conta de avaliação, clique nas configurações da API em https://util.clipchamp.com/pt-BR/api-setup/integrations, clique em YouTube e conecte a API Clipchamp à sua conta no YouTube para possibilitar o upload, para o seu canal ou para uma lista de reprodução específica, dos vídeos que os usuários enviam.

 

set-youtube-uploads

 

4) Em seguida, vá em https://util.clipchamp.com/pt-BR/api-setup/install

Nessa página existem 2 trechos de código – você precisa copiar os dois no Squarespace (passos 5 e 6 abaixo) para incorporar o gravador de webcam e o carregador no seu site. Você pode ignorar as instruções mencionadas na própria página, pois elas se referem aos sites não-Squarespace.

 

clipchamp-api-code

 

5) Crie uma nova página no Squarespace e abra a “Injeção de Código em Cabeçalho de Página”

Na Injeção de Código em Cabeçalho de Página, cole o trecho do código da primeira seção da página Clipchamp (aquela que inclui a sua chave da API) como abaixo:

 

webcam-video-squarespace

 

6) Em seguida, coloque o 2º trecho de código em um Bloco de Código no “Conteúdo de Página” da sua página:

 

Edite o conteúdo da página

squarespace-video-camera

 

e adicione o novo bloco de código na página onde você gostaria de exibir o botão de vídeo.

 

add-code-block

 

squarespace-html5-video

 

No bloco de código, insira o 2º trecho de código (o maior) que você copiou de https://util.clipchamp.com/en/api-setup/install.

 

squarespace-html5-camera

 

Certifique-se de selecionar a seguinte configuração no bloco de código:  “HTML” no menu suspenso à direita e desmarcar “Exibir Origem” à esquerda. Basta clicar em “Aplicar” após adicionar o trecho de código.

 

7) E então, salve e visualize a página em que você inseriu o código Clipchamp

Se os trechos foram adicionados e salvos corretamente, a página de visualização deve mostrar seu novo botão de gravação de vídeo Squarespace. A aparência do botão na nossa página é a seguinte:

 

squarespace video recorder - page preview

 

Squarespace video recording button

 

8) Como último passo, autorize o domínio do seu site nas configurações do Clipchamp

Para que o botão funcione, você precisa inserir o domínio do botão na lista de permissões nas configurações da sua API Clipchamp como abaixo:

Copie o URL do seu site e adicione-o à lista de domínios autorizados nas configurações da sua API Clipchamp.

No nosso exemplo, os domínios permitidos foram clipchamp-test.squarespace.com e www.clipchamp-test.squarespace.com. Não deixe de inserir o seu próprio domínio e, opcionalmente seu subdomínio www. 

authorize domain in the Clipchamp API settings

 

Após adicionar o URL (s) na lista, recarregue a visualização da sua página Squarespace. O botão do gravador de vídeo e do upload na página agora está prontos para ser usados pelos seus visitantes que podem começar a enviar vídeos gravados e outros. .

 

squarespace-video-recorder

 

Exibindo os vídeos enviados no seu site

Se você gostaria de utilizar os vídeos que as pessoas enviam para você,  que agora estão no seu canal YouTube, para exibi-los no seu site, por favor, veja as seguintes instruções na ajuda do Squarespace sobre como incorporar vídeos YouTube.

 

Squarespace KB about embedding videos

 

Conclusão

Estes são todos os passos necessários para colecionar vídeos se você está usando o Squarespace. Note que nós também os resumimos em um pequeno artigo de ajuda sobre o assunto para todos aqueles que já se registraram, criando uma conta de API de vídeo Clipchamp.

O artigo da nossa Base de Conhecimento inclui várias sugestões de resolução de problemas que venham a ocorrer ao inserir nosso botão de vídeo e exibi-lo corretamente no seu site. Ele também descreve uma opção de inserção de gravador de vídeo em todas as páginas do seu site automaticamente e contém amostra de código para personalizar a gravação do modo que você preferir.

O widget de câmera vem com uma faixa de opções de customização. Por exemplo, você pode alterar a marca, substituindo-a pela sua, fazer ajuste de cor e outros elementos de estilo, assim como várias configurações de vídeos de entrada e de saída.

Nós não abordamos essas opções avançadas neste artigo; no entanto, você é muito bem-vindo para lançar um olhar mais atento na documentação da API e ver quais parâmetros você acrescentaria no seu no seu gravador de vídeo Squarespace. Basta adicionar qualquer das opções no trecho do código que você inseriu no Bloco de Código no Passo 6.

Embora este post fale sobre recebimento de vídeos no Squarespace, o método que nós descrevemos também funciona para colocar o gravador em outras plataformas de construção de sites e CMSs – por exemplo, nós também criamos um tutorial para Wix. O requisito principal em todos eles é que você precisa de permissão para adicionar códigos personalizados às páginas nas configurações de administração do seu site.