Em uma postagem anterior, nós mostramos como converter vídeos e reduzir o tamanho dos seus arquivos para que você possa utilizá-los mais facilmente no seu blog Wix ou no seu site.

Enquanto o artigo acima se referia aos seus próprios arquivos de vídeo e ao projeto de design do seu site, nesta postagem estamos mostrando a você como instalar um gravador de vídeo para receber vídeos dos visitantes do seu site.

As capturas de tela abaixo são para Wix, embora o método descrito aqui também funcione para executar um gravador de webcam em outras plataformas de construção de sites,  desde que você consiga adicionar código personalizado nas suas configurações de admin dessas plataformas.

Criar e adicionar um gravador de vídeo Wix

Com este método, os usuários poderão gravar um vídeo com suas respectivas webcams diretamente no seu site Wix ou você pode também permitir que eles façam upload para você dos vídeos que eles já possuem no computador deles.

 

wix-video-recorder

 

Em ambos os casos, os vídeos podem ser enviados para a sua conta YouTube, Dropbox, Google Drive, Amazon S3 ou Microsoft Azure. Apesar de ser possível exibir facilmente os clipes nos seu site depois que as pessoas os enviam para você,  faz mais sentido que eles  enviem os vídeos para o YouTube já que você pode inseri-los de lá com o editor do Wix.

Para configurar esse gravador de vídeo do Wix, nós estamos utilizando a nossa API de câmera JavaScript e Vídeo HTML5. É um widget que você pode incorporar em um site para coletar vídeos dos seus usuários e visitantes do site. Apesar de estar disponível para qualquer tipo de site, há alguns passos específicos necessários para o seu funcionamento e execução em um site Wix.

 

*************
As recommended by Wix
, the best way to embed a recording and video uploading widget like the Clipchamp API is via backend code, see https://support.wix.com/en/article/accessing-3rd-party-services#backend-service-call.

A developer or software engineer in your team or at your web agency will be able to follow these instructions in combination with the steps described at https://help.clipchamp.com/collect/getting-started/initial-setup-of-the-clipchamp-api.

*************
A 2nd method using Custom Code blocks in the frontend of your website is described below. Note that it might not work in some circumstances, if that is the case then the method recommended by Wix through the backend code of your site is the best alternative.
**************

 

1) Acesse o back-end de administração do seu site Wix

Você vai precisar criar uma nova página de amostra numa etapa posterior e copiar alguns códigos nas Configurações HTML desta página.

 

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

Registrando-se com uma conta de avaliação grátis da nossa API é necessário para a obter a sua chave de API exclusiva que você vai precisar em um próximo passo e para definir um alvo de upload para os vídeos dos usuários. 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 os vídeos do usuário

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

set-youtube-uploads

 

4) Vá à https://util.clipchamp.com/en/api-setup/install

Você verá nessa página 2 trechos de códigos que são necessários para inserir um botão de gravação de vídeo no seu site. Você pode ignorar as instruções mencionadas na própria página, pois elas se referem aos sites não-Wix. No seu caso, o que você tem que fazer é copiar & colar ambos os trechos de código no editor HTML de uma nova página que você cria no Wix.

 

clipchamp-api-code

 

5) Crie uma nova página no Wix e abra as “Configurações HTML”

No editor HTML, cole o trecho do código da primeira seção da página do Clipchamp do passo 4, como abaixo:

wix-html-editor

 

6) E então, copie o código da segunda seção diretamente abaixo do primeiro trecho de código no editor HTML

 

wix-html-editor

 

7) Em seguida, salve e visualize a página onde você inseriu o código HTML

Se o código foi adicionado corretamente, a visualização da página deverá exibir um novo botão de gravação de vídeo incorporado. Uau!

test-video-button

 

8) Como último passo, autorize os domínios do botão de vídeo

Para que o gravador funcione, você precisa autorizar 2 domínios na sua API Clipchamp, como se segue:

O primeiro domínio: Copie o URL que o Wix está usando para mostrar o botão Clipchamp incorporado na sua página Wix e adicione-o à lista de domínios autorizados nas configurações da sua API Clipchamp em  https://util.clipchamp.com/en/api-setup/domains. Note que este não é o URL (ou “domínio”) que é mostrado na barra de endereço do seu navegador (assumindo-se que você está usando o Chrome) mas é o URL do iframe onde está o botão de vídeo na sua página.

Você pode obter esse nome de domínio movendo o ponteiro do mouse alguns pixels para baixo do botão Clipchamp na visualização da página, depois clique com o botão direito e selecione “ver origem do frame”. No Chrome, isto abre uma nova guia. Vá na barra de endereço da guia e copie o nome do domínio de lá. No nosso exemplo, o domínio aparece assim:

wix-iframe-url

O 2º domínio: O nome deste domínio segue a convenção de nomenclatura yourwebsitename-wixsite-com.fileusr.com, então, exemplo, moestavern-wixsite-com.fileusr.com. Adapte ao nome do seu site e adicione-o à sua lista de domínios Clipchamp, e então você poderá publicar sua página Wix de teste com o botão de gravação incorporado nela para ver se ele está sendo exibido corretamente.

Você pode também encontrar esse 2º nome domínio olhando o código fonte da sua página Wix.

whitelist Wix domain to display the video recorder button

Após salvar esses 2 nomes de domínio nas configurações da sua API Clipchamp, o botão de gravação de vídeo e de upload na sua página Wix estará pronto para ser usado e, portanto, seus usuários podem começar a enviar vídeos gravados e outros vídeos para o seu canal YouTube.

wix-video-recorder

 

9) Mostre os vídeos enviados no seu site

Se você gostaria de utilizar os vídeos que as pessoas enviam para você e que agora estão no seu canal YouTube, exibindo-os no seu site, por favor, siga as seguintes instruções na ajuda do Wix sobre como inserir vídeos YouTube.

 

Finalizando

Estes são todos os passos necessários para colecionar vídeos dos visitantes do seu site se você estiver usando o Wix. Note que nós também escrevemos um pequeno artigo de ajuda sobre o assunto para todos aqueles que já se registraram, criando uma conta de API de vídeo Clipchamp.

Se você não está usando um construtor de site, por favor, veja este tutorial separado com instruções de instalação para incorporar a API de vídeo HTML5 em qualquer website.

Nós a construímos junto com nossos clientes para adequá-la a uma ampla gama de cenários e a qualquer tipo de projeto web. Isto inclui, por exemplo, a capacidade de colecionar depoimentos em vídeo dos seus clientes, caso você tenha uma loja online ou ainda receber comentários em vídeo de leitores no seu blog.

Uma nota final  – nosso widget gravador de vídeo vem com uma grande variedade de opções. Por exemplo, você pode alterar a marca substituindo-a pela sua própria, ajustar cor e outros elementos de estilo, assim como várias configurações relacionada aos vídeos de entrada e saída.

Como estas são opções para especialistas, nós não as abordamos nesta postagem. Entretanto, você está convidado a  examinar mais a fundo a  documentação da nossa API e decidir quais dos seus parâmetros você gostaria de adicionar no seu gravador de vídeo Wix. Você pode acrescentar quaisquer opções nos trechos de códigos que você inseriu no editor de HTML no passo 6.