REC

Consejos sobre filmación, producción, edición de video y mantenimiento de equipos.

 WTVID >> Video >  >> video >> Captura y grabación de video

Cómo incrustar un widget de grabadora de video en los sitios web de Wix

*** Este producto está descatalogado ***

En una publicación anterior, te mostramos cómo convertir videos y reducir su tamaño de archivo para que puedas usarlos más fácilmente en tu blog o sitio web de Wix.

Si bien este artículo anterior estaba relacionado con sus propios archivos de video y el diseño de su sitio web, en la publicación actual le mostramos cómo instalar una grabadora de video para recibir videos de los visitantes de su sitio .

Las capturas de pantalla a continuación son para Wix, sin embargo, el método descrito aquí también funciona para que una cámara web se ejecute en otras plataformas de creación de sitios web, siempre que pueda agregar un código personalizado en la configuración de administración de su plataforma.

Crear y agregar una grabadora de video Wix

Los usuarios podrán grabar un video con su cámara web directamente en tu sitio de Wix o puedes dejar que te carguen archivos de video que ya tienen en su computadora.

En ambos casos, los videos pueden enviarse a su cuenta de YouTube, Dropbox, Google Drive, Amazon S3 o Microsoft Azure. Sin embargo, para poder mostrar fácilmente los clips en su sitio web después de que las personas se los carguen, enviarlos a YouTube tiene más sentido ya que puedes incrustarlos desde allí a través del editor de Wix.

Para configurar esta grabadora de video Wix, utilizamos nuestra API de video HTML5 y JavaScript para cámara web. Es un widget que puede incrustar en un sitio web para recopilar videos de usuarios y visitantes del sitio. Si bien está disponible para sitios web de cualquier tipo, se requieren algunos pasos específicos para que funcione en un sitio de Wix.


Según lo recomendado por Wix , la mejor manera de insertar un widget de grabación y carga de videos como la API de Clipchamp es a través del código de backend, consulte https://support.wix.com/en/article/accessing-3rd-party-services#backend-service-call.

Un desarrollador o ingeniero de software de su equipo o de su agencia web podrá seguir estas instrucciones junto con los pasos descritos en https://help.clipchamp.com/collect/getting-started/initial-setup-of-the -clipchamp-api.


Un segundo método que utiliza bloques de código personalizado en la interfaz de su sitio web es el siguiente:

1) Inicie sesión en el backend de administración de su sitio web de Wix

Deberá crear una nueva página de muestra en un paso posterior y copiar un código en la Configuración HTML de esta página.

2) En una 2.ª pestaña del navegador, regístrese para obtener una prueba de la API de vídeo de Clipchamp

Es necesario registrarse para obtener una cuenta de prueba de nuestra API para obtener su clave API única, que necesitará en un paso posterior y establecer un objetivo de carga para los videos de los usuarios. No necesita una tarjeta de crédito para registrarse y puede cancelar la prueba en cualquier momento.

3) Establecer YouTube como destino de carga para enviar videos de usuarios

Después de abrir una cuenta de prueba, en la configuración de la API en https://util.clipchamp.com/en/api-setup/integrations, haga clic en YouTube y conecte la API de Clipchamp a su cuenta de YouTube para que los videos que envíen sus usuarios puedan cargarse en su canal o en una lista de reproducción específica.

4) Vaya a https://util.clipchamp.com/en/api-setup/install

En esa página es donde verá 2 fragmentos de código que se requieren para incrustar un botón de grabación de video en su sitio. Puede ignorar las instrucciones que se mencionan en esta página, ya que se aplican a sitios web que no son de Wix. En tu caso, lo que tienes que hacer es copiar y pegar ambos fragmentos de código en el editor HTML de una nueva página que crees en Wix.

5) Crea una nueva página en Wix y abre la “Configuración HTML”

En el editor HTML, pegue el fragmento de código de la primera sección de la página de Clipchamp del paso 4 de la siguiente manera:

6) Luego, copie el código de la segunda sección directamente debajo del primer fragmento en el editor HTML

7) A continuación, guarde y obtenga una vista previa de la página en la que incrustó el código HTML

Si el código se agregó correctamente, la página de vista previa debería mostrar un nuevo botón de grabación de video incrustado. ¡Hurra!

8) Como último paso, autorice los dominios de los botones de video

Para que la grabadora funcione, debe incluir en la lista blanca 2 dominios en la configuración de la API de Clipchamp de la siguiente manera:

El primer dominio: Copie la URL que usa Wix para mostrar el botón de Clipchamp incrustado en su página de Wix y agréguelo a la lista de dominios autorizados en la configuración de la API de Clipchamp en https://util.clipchamp.com/en/api-setup/domains. Tenga en cuenta que esta no es la URL (o "dominio") que se muestra en la barra de direcciones de su navegador (asumimos que está usando Chrome), pero es la URL del iframe en el que se encuentra el botón de video en su página.

Puede obtener este nombre de dominio moviendo el puntero del mouse unos pocos píxeles debajo del botón de Clipchamp en la vista previa de la página, luego haciendo clic con el botón derecho y seleccionando "ver fuente del marco". En Chrome, esto abre una nueva pestaña del navegador. Vaya a la barra de direcciones de la pestaña y copie el nombre de dominio desde allí. En nuestro ejemplo, el dominio se ve así

El segundo dominio: Este nombre de dominio sigue la convención de nomenclatura yourwebsitename-wixsite-com.fileusr.com , por ejemplo moestavern-wixsite-com.fileusr.com . Ajústelo al nombre de su sitio web y agréguelo a su lista de dominios de Clipchamp, luego puede publicar su página de prueba de Wix con el botón de grabación incrustado para verificar si se muestra correctamente.

También puedes encontrar este segundo nombre de dominio mirando el código fuente de tu página de Wix

Después de guardar estos 2 nombres de dominio en la configuración de la API de Clipchamp, la grabadora de video y el botón de carga en su página de Wix estarán listos para usarse para que sus visitantes puedan comenzar a enviar grabaciones y otros videos a su canal de YouTube.

9) Mostrar videos enviados en su sitio

Si desea utilizar videos que la gente le envía y que ahora se encuentran en su canal de YouTube para mostrarlos en su sitio web, consulte las siguientes instrucciones en la ayuda de Wix sobre cómo insertar videos de YouTube.

Resumiendo

Estos son todos los pasos necesarios para recopilar videos de los visitantes de tu sitio si estás usando Wix. Tenga en cuenta que también hemos escrito un breve artículo de ayuda sobre el tema para cualquier persona que ya se haya registrado en una cuenta API de video de Clipchamp.

Si no está utilizando un creador de sitios web, consulte este tutorial separado para obtener instrucciones de instalación para incrustar la API de video HTML5 en cualquier sitio web.

Lo construimos junto con nuestros clientes para que sea adecuado para una amplia gama de escenarios y cualquier tipo de proyecto web. Esto incluye, por ejemplo, la capacidad de recopilar testimonios en video de sus clientes si tiene una tienda en línea o para obtener comentarios en video de lectores en su blog.

Una nota final:nuestro widget de grabadora de video viene con una amplia gama de opciones, por ejemplo, puede cambiar su marca por la suya propia, ajustar los colores y otros elementos de estilo, así como una serie de configuraciones relacionadas con la entrada y salida de videos.

Como estas son opciones de expertos, las hemos cubierto en esta publicación, sin embargo, puede profundizar en la documentación de la API y decidir cuáles de sus parámetros le gustaría agregar a su grabadora de video Wix. Puede agregar cualquier opción en el fragmento de código que insertó en el editor HTML en el paso 6.


  1. Cómo grabar Overwatch

  2. Grabador de pantalla Movavi 11

  3. Cómo usar la grabadora de pantalla IO

  4. Cómo hacer una presentación de video

  5. ¿Cómo incrustar un video de Facebook en diferentes plataformas?

  6. Cómo incrustar un video en Presentaciones de Google (YouTube y Google Drive)

  7. Cómo incrustar un video de YouTube en Presentaciones de Google

  8. Cómo incrustar un video de YouTube en Facebook

  9. Cómo incrustar un video en PowerPoint (paso a paso)

  1. Cómo acercar un video

  2. Cómo rotar un video

  3. Incrustar video en el correo electrónico:por qué, cómo y cuándo

  4. Cómo incrustar video en correo electrónico (2 métodos + 1 bono)

  5. Cómo incrustar un video en PowerPoint (desde Drive y YouTube)

  6. Cómo incrustar videos de Dailymotion en WordPress

  7. Cómo incrustar video en tu sitio web o blog de Wix

  8. Cómo incrustar una grabadora de video en su sitio web de Squarespace

  9. Cómo incrustar un vídeo de LinkedIn en su sitio web

Captura y grabación de video