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 tener Node.js instalado en tu computadora.
    • Ejecuta el comando node -v para verificar.
  2. Asegúrese de tener FFMPEG instalado en tu computadora.
    • Esta es la biblioteca que utiliza remotion para procesar los archivos de audio y vídeo.
    • Ejecuta el comando ffmpeg para verificar. De lo contrario, sige estas instrucciones.

Inicio

  1. Con eso fuera del camino, ejecuta el comando npx create-video@latest,
    • Elije una plantilla.
    • Cuando finalice el comando, deberías tener un nuevo proyecto de Remotion para trabajar.
  2. Nos movemos al directorio recién creado: cd my-video,
    • Recomendamos abrirlo en su editor de texto.
  3. Instala las dependencias del proyecto npm install.
    • Esto instalará Remotion si está en package.json.

npm install –legacy-peer-deps

  1. Una vez creado el andamiaje del proyecto, ejecuta el comando npm start para iniciar Remotion Studio; una herramienta de vista previa,

    • Alias de npx remotion preview y npm run dev.

Proyecto

En la carpeta src hay 2 archivos:

  1. src/index.ts
  2. src/Root.tsx

O con extensión jsx si elijes usar javascript.

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 de React.

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}
/>

Otros

  1. Verifica tu versión de Remotion
npm list @remotion/cli
  1. Borrar la caché de Remotion
  • Borra el caché local que usa Remotion:
rm -rf .remotion
  • Si quieres asegurarte de que todo esté limpio:
rm -rf .remotion dist out
  • Vuelve a correr:
npx remotion preview