Editor

Remotion

Vídeos programables

  • Es un framework construido sobre React para crear videos usando código,
  • Renderiza videos MP4 usando @remotion/lambda,
  • Visualiza videos en el navegador en tiempo real (vista previa) con @remotion/player.

Caracteristicas destacadas

  • Puede obtener datos de una API y utilízarlos como contenido,
  • Es gratis para particulares.

Instalación

  1. Asegúrese de estar usando la versión Node.js 14.0.0 o superior. Puede verificar esto ejecutando node -v en su consola.
  2. Asegúrese de tener FFMPEG instalado en su computadora. Esta es la biblioteca que utiliza remotion para procesar los archivos de audio y vídeo. Puede verificar esto ejecutando el comando ffmpegen en su consola. De lo contrario, siga estas instrucciones.

Inicio

  1. Con eso fuera del camino, ejecutemos: npm init,

Se le pedirá que asigne un nombre a su video y elija una plantilla. Cuando finalice el comando, debería tener un nuevo proyecto de Remotion para trabajar.

  1. Nos movemos al directorio recién creado: cd my-video,
  2. y Ejecutamos npm start para visualizar la herramienta de vista previa,

Proyecto

En la carpeta src hay 3 archivos:

  1. index.ts
  2. Composition.tsx
  3. Root.tsx

Composition.tsx

La composición es el lienzo. Contiene todo lo que aparecerá en un video. Cada composición <Composition/> se convertirá en un video cuando remotion lo exporte.

   <Composition
      id="nombre-video" // El nombre del video se establece con el atributo `id`.
      component={ProductHuntLogo} // Indica el componente que se usará para renderizar el video.
      width={240}
      height={240}
      fps={30}
      durationInFrames={90}
   />
  1. El archivo puede nombrarse diferente (por ejemplo, Video.tsx).

Configuración para Youtube

<Composition
   fps={30}
   width={1920}
   height={1080}
/>

Root.tsx

root.tsx define el documento que representa su aplicación. Se presenta como un documento HTML típico con la excepción de que las etiquetas (en mayúsculas) son todos componentes.