Editor

Archivos multimedia

import { Img, OffthreadVideo, Audio, AbsoluteFill, staticFile } from "remotion";
import logo from "./logo.png";
export const MyComp: React.FC = () => {
   // Imágenes (ejemplos)
   return (
    <AbsoluteFill>
      <Img src={staticFile("logo.png")} />
    </AbsoluteFill>
   );
   return <Img src={logo} />; // Puede usar una declaración import 
   return <Img src="https://picsum.photos/id/237/200/300" />; // Puede usar una URL.
   return <Img src={staticFile("logo.png")} />; // Use `staticFile()` para hacer referencia a la carpeta `public/` del proyecto.
   return <Img src={staticFile(`/frame${frame}.png`)} />; // Se pueden crear rutas dinámicas. Por ejemplo, para una secuencias de imagenes.
   // Al igual que `Img` use las etiquetas `OffthreadVideo` y `Audio` para vídeos y audios respectivamente
};

Audios

De forma predeterminada, el audio se reproducirá desde el principio, a todo volumen y en toda su duración.

Atributos de la etiqueta <Audio />: 

<Audio src={staticFile("audio.mp3")} volume={0.5} startFrom={60} endAt={120} />
// Asumiendo que fps=30, el audio se reproducirá en el rango de 00:02:00 a 00:04:00,
// lo que significa que el audio se reproducirá durante 2 segundos.
  • Asumiendo que fps=30:
    1. Al pasar startFrom={60}, la reproducción comienza inmediatamente, pero con los primeros 2 segundos del audio recortados.
    2. Al pasar endAt={120}, se recortará cualquier audio después de la marca de 4 segundos en el archivo.
  1. volume puede recibir un número entre 1 (volumen máximo) y 0 (silencio).
// Puede cambiar el volumen con el tiempo
volume={(f) =>
   interpolate(f, [0, 30], [0, 1], { extrapolateLeft: "clamp" })
}
// Debemos configurar la opción `extrapolateLeft:'clamp'` para garantizar que no haya valores negativos.
// 4. En el siguiente ejemplo, silenciamos la pista entre los fotogramas 40 y 60.
<Audio src={staticFile("audio.mp3")} muted={frame >= 40 && frame <= 60} />
  • El audio de las etiquetas <Video /> y <OffthreadVideo /> también se incluye en la salida. De modo que se puede utilizar startFrom, endAt, volume y muted de la misma manera.
  • Utilice una <Sequence> con un valor from positivo para retrasar la reproducción de un audio.
  • Puede mezclar varias pistas agregando más etiquetas de audio.
  • Puede utilizar el atributo playbackRate [0.0625, 16] para controlar la velocidad del audio.
  • Remotion tiene API para visualizar, leer y procesar audio, Consulte la documentación para obtener más información.

Advertencias

  1. El tamaño máximo de archivo es 2 GB.
  2. Use staticFile() si es posible. Manejar activos dinámicos puede provocar errores.

CSS

import "./style.css";

Consulte: Duración dinámica para hacer que la duración de tus videos dependa de tus recursos.