Dies sind Anweisungen zum Erstellen eines neuen Remotion-Projekts und einer neuen Komposition. Wenn dies nicht die nächste Aufgabe ist, siehe Remotion Best Practices
Ein Projekt erstellen
Wenn bereits ein Projekt existiert, überspringe diesen Schritt. Stelle sicher, dass Node.js und Git installiert sind und der aktuelle Ordner geeignet ist, um ein neues Projekt zu starten.
Überprüfe den aktuellen Ordner, einschließlich versteckter Dateien, bevor du entscheidest, wo das Projekt erstellt werden soll.
Leerer Ordner
Wenn der Ordner leer ist oder nur entfernbare Betriebssystem-Metadaten wie .DS_Store enthält, erstelle das Projekt direkt im aktuellen Ordner.
Entferne zuerst nur diese entbehrlichen Metadatendateien, da create-video nicht-leere Ordner ablehnt.
Behandle nicht alle versteckten Dateien als entbehrlich: Dateien wie .env und Verzeichnisse wie .git sind bedeutungsvolle Inhalte.
Projekt im vorhandenen Ordner erstellen:
npx create-video@latest --yes --blank --no-tailwind .
npm i
Nicht-leerer Ordner
Wenn der aktuelle Ordner bedeutungsvolle Inhalte enthält und noch kein Projekt existiert, erstelle das Projekt in einem neuen Unterordner.
Ersetze my-video durch einen geeigneten Projektnamen.
npx create-video@latest --yes --blank --no-tailwind my-video
cd my-video
npm i
Vorschau öffnen, bevor das Video gebaut wird
Sobald das Projekt ausgeführt werden kann, öffne Remotion Studio im Browser, bevor du die Komposition schreibst oder änderst. Für ein neues Projekt tue dies sofort nach dem Erstellen und Installieren der Abhängigkeiten. Für ein bestehendes Projekt tue dies vor dem Bearbeiten des Videos. Lasse Studio während der Arbeit geöffnet, damit der Benutzer Änderungen sehen und das Ergebnis steuern kann.
Ein Video gestalten
Behalte das Grundgerüst und füge React-Markup hinzu. Folge den Remotion React Markup Best Practices und den Video Layout Rules für videoorientiertes Layout und Textgrößen-Richtlinien.
Bevor du die Root schreibst, die <Composition>- oder <Still>-Elemente registriert, folge den Anweisungen zu Compositions and stills.
Handelt es sich um eine Zeitleiste mit Clips?
Wenn das Video mehrere Video- oder Audioclips auf einer Zeitleiste anordnet, folge den Anweisungen zur Videobearbeitung, bevor du die Zeitleiste schreibst. Gib jedem Clip, der unabhängig bearbeitet werden soll, einen eigenen JSX-Knoten.
Handelt es sich um ein Multi-Szenen-Video?
Wenn es sich um ein Video mit mehreren aufeinanderfolgenden Szenen handelt, folge den Anweisungen unter Multi-scene videos.
Best Practices für Interaktivität
Indem du das React-Markup gemäß den Remotion Interactivity Best Practices strukturierst, ermöglichst du dem Benutzer, Änderungen im Studio vorzunehmen, die zurück in den Code geschrieben werden.
TailwindCSS
Wenn Tailwind gewünscht wird, siehe tailwind.md für die Verwendung von TailwindCSS in Remotion.
Abschluss
Der Videocrstellungsprozess ist abgeschlossen. Für Folgefragen verwende die Remotion Best Practices.