En una publicación anterior de este año, te mostramos cómo usar vídeos en tu página web de Squarespace más fácilmente – como vídeo de fondo o como clip integrado.

En el artículo de hoy, te enseñaremos la mejor manera de recopilar vídeos de los usuarios y visitantes de tu página web integrando una grabadora de vídeo y un widget de subida directamente en tu sitio.

Hacemos esto con la ayuda de la API de cámara HTML5 de Clipchamp – una herramienta de captura de vídeo que puede utilizarse en cualquier tipo de página web, por ejemplo, para recopilar testimonios en vídeo de tus clientes si diriges una tienda online, para aceptar el envío de vídeos para competiciones, o para recibir comentarios en vídeo de lectores de tu blog.

Siguiendo nuestro tutorial, la instalación en tu sitio Squarespace es muy directa, sin necesidad de conocimientos especializados.

 

Crear y añadir una grabadora de vídeo en Squarespace

Puedes decidir si tus visitantes tienen que grabar con sus cámaras web directamente en tu sitio, seleccionar y subir vídeos que ya tengan en sus dispositivos, o también proporcionarles ambas opciones para que puedan elegir la que prefieran.

En virtud de la tecnología única que hemos diseñado, todos los archivos de vídeo son enviados directamente desde los dispositivos de los usuarios al almacenamiento objetivo en la nube que selecciones sin pasar por nuestra infraestructura. Esto ayuda a proteger tu privacidad y la de tus visitantes.

 

squarespace-vídeo-grabadora

 

En cuanto al destino de subida, los vídeos pueden enviarse a tu cuenta en YouTube, Dropbox, Google Drive, Amazon S3 o Microsoft Azure.

Para poder mostrar los clips en tu página web después de que la gente te los envíe, subirlos a YouTube es lo más lógico, ya que puedes integrarlos desde ahí mediante las pantallas de administrador de Squarespace.

Y ahora, aquí están los pasos para colocar tu grabadora de vídeo en Squarespace:

 

1) Accede a tu interfaz de administrador de la página web

Esto es necesario porque necesitas crear una nueva página de prueba en un paso posterior y copiar un fragmento de código en el HTML de esa página.

 

Acceso a Squarespace

 

2) En una 2ª pestaña del navegador, regístrate para un periodo de prueba gratis de la API de vídeo de Clipchamp

Registrar una cuenta de prueba de nuestra API es necesario para que consigas tu clave de API única, que necesitarás en un paso posterior, y para habilitar un objetivo de subida para los vídeos que recibas. No necesitas ninguna tarjeta de crédito para suscribirte y puedes cancelar el periodo de prueba en cualquier momento.

 

registro-clipchamp-prueba

 

3) Establece YouTube como objetivo de subida al que enviar los vídeos de los usuarios

Tras abrir una cuenta de prueba, en la configuración de la API en https://util.clipchamp.com/es/api-setup/integrations, haz clic en YouTube y conecta la API de Clipchamp con tu cuenta de YouTube para que los vídeos enviados por los usuarios puedan subirse a tu canal o a una lista de reproducción específica.

 

configurar-youtube-subidas

 

4) A continuación, dirígete a https://util.clipchamp.com/es/api-setup/install

En esta página hay 2 fragmentos de código – tienes que copiar ambos fragmentos en Squarespace (pasos 5 y 6 a continuación) para integrar la grabadora webcam y la herramienta de subida en tu sitio. Puedes ignorar las instrucciones que se mencionan en la propia página ya que no son para páginas web de Squarespace.

 

clipchamp-api-código

 

5) Crea una página nueva en Squarespace y abre la «Inyección de código de encabezado de página»

En la Inyección de código de encabezado de página, pega el fragmento de código de la primera sección de la página Clipchamp (el que incluye tu clave de API) tal y como sigue:

 

webcam-vídeo-squarespace

 

6) Después, coloca el 2º fragmento de código en un Bloque de Código en el «Contenido de la página» de tu página:

 

Edita el contenido de la página,

squarespace-vídeo-cámara

 

y añade un bloque de código nuevo en la página en la que quieres que aparezca un botón de vídeo.

 

añadir-bloque-código

 

squarespace-html5-vídeo

 

En el bloque de código, inserta el 2º (mayor) fragmento de código que has copiado de https://util.clipchamp.com/es/api-setup/install.

 

squarespace-html5-cámara

 

Asegúrate de seleccionar la siguiente configuración en el bloque de código: «HTML» en el desplegable de la derecha y «Mostrar fuente» sin marcar a la izquierda. Pulsa «Aplicar» cuando hayas añadido el fragmento de código.

 

7) A continuación, guarda y comprueba la vista previa de la página en la que has integrado el código Clipchamp

Si los fragmentos se añadieron y guardaron correctamente, la página de prueba debería mostrar tu nuevo botón de grabadora de vídeo en Squarespace. En nuestra página de prueba, el botón tiene este aspecto:

 

grabadora de vídeo en squarespace - vista previa de la página

 

botón de grabación de vídeo en Squarespace

 

8) Como paso final, autoriza el dominio de tu página web en la configuración de Clipchamp

Para qué el botón funcione, tienes que poner en la lista blanca el dominio del botón en la configuración de tu API de Clipchamp tal y como sigue:

Copia la URL de tu página web y añádela a la lista de dominios autorizados en la configuración de tu API de Clipchamp en https://util.clipchamp.com/es/api-setup/domains.

En nuestro ejemplo, los dominios que pusimos en la lista blanca fueron clipchamp-test.squarespace.com y www.clipchamp-test.squarespace.com. Asegúrate de insertar tu propio dominio y opcionalmente su www. subdominio.

 

autorizar dominio en la configuración de la API de Clipchamp

 

Tras añadir la URL(s) a la lista, recarga la vista previa de tu página Squarespace. Ahora el botón de la grabadora de vídeo y la herramienta de subida de la página está listo para su uso, así que tus visitantes pueden empezar a enviarte grabaciones y otros vídeos.

 

squarespace-vídeo-grabadora

 

Mostrar vídeos enviados en tu sitio

Si quieres usar los vídeos que la gente te envíe y que ahora están ubicados en tu canal de YouTube para mostrarlos en tu página web, por favor, consulta las siguientes instrucciones en la ayuda de Squarespace sobre cómo integrar vídeos de YouTube.

 

Squarespace KB sobre integración de vídeos

 

Conclusión

Estos son todos los pasos necesarios para recopilar vídeos si utilizas Squarespace. Ten en cuenta que también los hemos resumido en un breve artículo de ayuda sobre el tema para cualquiera que ya se haya registrado en una cuenta para la API de vídeo de Clipchamp.

Nuestro artículo en la Base de Conocimientos incluye varias sugerencias de resolución de problemas en caso de que encuentres cualquier dificultad a la hora de conseguir que nuestro botón de vídeo aparezca correctamente en tu página web. También describe una opción para integrar una grabadora de vídeo automáticamente en todas las páginas de tu sitio, y contiene códigos de ejemplo para personalizar la grabadora a tu gusto.

El widget de la cámara tiene una amplia variedad de opciones de personalización, por ejemplo, puedes cambiar su marca por tu propia marca, ajustar los colores y otros elementos de estilo, y varias configuraciones relacionadas con los vídeos de entrada y salida.

No hemos cubierto estas opciones especializadas en este artículo, pero te invitamos a profundizar en la documentación de la API para ver los parámetros que te gustaría añadir a tu grabadora de vídeo en Squarespace. Sencillamente añade cualquier opción en el fragmento de código que has insertado en el Bloque de Código durante el paso 6.

Aunque este artículo trata sobre recepción de vídeo en Squarespace, el método que describimos también funciona para colocar la grabadora en otras plataformas de creación de páginas web y CMSs – por ejemplo, también escribimos un tutorial para Wix. El principal requisito para todas ellas es que necesitas permiso para añadir código personalizado a las páginas en la configuración de administrador de tu sitio.