davila7/remotion

Was macht remotion?

Bewährte Methoden und umfassender Leitfaden für Remotion – programmatische Videocreation in React mit Animationen, Kompositionen und Medienverwaltung

Einführung

Remotion ermöglicht es dir, Videos programmatisch mit React zu erstellen. Du kannst React-Komponenten, Hooks und die leistungsstarke Rendering-Engine von Remotion nutzen, um dynamische, datengesteuerte Videos zu generieren.

Kompositionen

Kompositionen sind die Grundbausteine eines Remotion-Projekts. Sie definieren die Metadaten eines Videos wie Auflösung, Bildrate und Dauer.

Definieren einer Komposition

import { Composition } from 'remotion';
import { MyVideo } from './MyVideo';

export const RemotionRoot = () => {
  return (
    <>
      <Composition
        id="MeinVideo"
        component={MyVideo}
        durationInFrames={120}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

Registrieren von Kompositionen

Verwende registerRoot, um die Wurzelkomponente zu registrieren, die alle deine Kompositionen enthält.

import { registerRoot } from 'remotion';
import { RemotionRoot } from './Root';

registerRoot(RemotionRoot);

Sequenzen und Übergänge

<Sequence>

Die <Sequence>-Komponente organisiert den zeitlichen Ablauf deines Videos. Sie ermöglicht es dir, verschiedene Abschnitte unabhängig voneinander zu timen.

import { Sequence } from 'remotion';

export const MyVideo = () => {
  return (
    <>
      <Sequence from={0} durationInFrames={30}>
        <h1>Einführung</h1>
      </Sequence>
      <Sequence from={30} durationInFrames={60}>
        <h1>Hauptteil</h1>
      </Sequence>
    </>
  );
};

<TransitionSeries>

Für fließende Übergänge zwischen Sequenzen verwende <TransitionSeries> mit vordefinierten Übergängen wie slide, fade oder warpIn.

import { TransitionSeries, spring } from '@remotion/transitions';
import { slide } from '@remotion/transitions/slide';

export const MyVideo = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <h1>Szene 1</h1>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={slide()}
        timing={spring({ durationInFrames: 20 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <h1>Szene 2</h1>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

Arbeiten mit Medien

Remotion unterstützt verschiedene Medientypen: Audio, Video, Bilder, GIFs (mit @remotion/gif), SVGs und Lottie-Animationen (mit @remotion/lottie).

Video einbinden

import { Video } from 'remotion';
import source from './meinvideo.webm';

export const MyVideo = () => {
  return (
    <Video src={source} />
  );
};

Audio einbinden

import { Audio } from 'remotion';

export const MyVideo = () => {
  return (
    <Audio src="https://beispiel.de/audio.mp3" />
  );
};

Animationen

Mit useCurrentFrame()

Der Hook useCurrentFrame() gibt den aktuellen Frame-Index zurück, basierend darauf kannst du Animationen berechnen.

import { useCurrentFrame } from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  return (
    <div>Frame: {frame}</div>
  );
};

Mit spring()

spring() erzeugt elastische Animationen, ideal für natürliche Bewegungen.

import { useCurrentFrame, spring } from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const scale = spring({ frame });
  return (
    <div style={{ transform: `scale(${scale})` }}>
      Spring-Animation
    </div>
  );
};

Rendern und Export

Statische Frames exportieren

Exportiere einzelne Frames als Bilder:

npx remotion still src/index.tsx MeinVideo ausgabe/frame.png --frame=10

Video exportieren

Exportiere das gesamte Video:

npx remotion render src/index.tsx MeinVideo ausgabe/video.mp4

Audio exportieren

Exportiere die Audiospur:

npx remotion render src/index.tsx MeinVideo ausgabe/audio.mp3

Performance-Optimierung

• Verwende Memoisierung (React.memo, useMemo) für schwere Komponenten.
• Nutze useCurrentFrame() sparsam und nur dort, wo es nötig ist.
• Ziehe stand-alone Medien (<Img>, <Video>) <OffthreadVideo> vor, um die Frame-Rendering-Performance zu verbessern.
• Setze useVideoConfig() ein, um auf Konfigurationsdaten zuzugreifen, ohne die Komponente neu zu berechnen.

Player-Komponente

Die <Player>-Komponente erlaubt es, Remotion-Videos interaktiv im Browser abzuspielen, mit Steuerungselementen für Wiedergabe, Pause und Zeitleiste.

import { Player } from '@remotion/player';
import { MyVideo } from './MyVideo';

export const App = () => {
  return (
    <Player
      component={MyVideo}
      durationInFrames={120}
      compositionWidth={1920}
      compositionHeight={1080}
      fps={30}
    />
  );
};

Nützliche Hooks

Hook	Beschreibung
useVideoConfig()	Gibt die Konfiguration der aktuellen Komposition zurück (width, height, fps, durationInFrames)
useCurrentFrame()	Gibt den aktuellen Frame-Index (0-basiert) zurück
useTime()	Gibt die aktuelle Zeit in Sekunden zurück

Ressourcen

• Offizielle Remotion-Dokumentation
• Remotion GitHub-Repository
• @remotion/player NPM-Paket
• @remotion/transitions NPM-Paket