Erstellen eines webbasierten Video-Editors mit Remotion, Next.js und Tailwind CSS

Wenn Sie schon immer Ihren eigenen leistungsstarken, webbasierten Videoeditor erstellen wollten – ähnlich wie beliebte Tools wie Veed.io oder Descript – sind Sie hier richtig! In dieser Schritt-für-Schritt-Anleitung zeigen wir Ihnen, wie Sie einen Videoeditor mit Remotion, Next.js und Tailwind CSS erstellen. Am Ende verfügen Sie über eine solide Grundlage für die Entwicklung Ihres eigenen browserbasierten Videobearbeitungstools.

Einführung

Webbasierte Videoeditoren erfreuen sich aufgrund ihrer Zugänglichkeit und Benutzerfreundlichkeit immer größerer Beliebtheit. Durch die Verwendung von Remotion für die Videowiedergabe, Next.js für ein leistungsstarkes React-basiertes Framework und Tailwind CSS für schnelles und anpassbares Styling können Sie ein flexibles erstellen Videobearbeitungstool, das direkt im Browser ausgeführt wird.

In diesem Leitfaden erstellen wir eine vereinfachte Version von Tools wie React Video Editor, die es Benutzern ermöglicht, Videoclips anzuordnen, Textüberlagerungen hinzuzufügen und eine Vorschau ihrer Videos in Echtzeit anzuzeigen.

Voraussetzungen

Bevor wir loslegen, stellen Sie sicher, dass Sie Folgendes installiert haben:

• Node.js (v14 oder höher)
• npm (gebündelt mit Node.js)
• Code-Editor (z. B. Visual Studio Code)

Einige Erfahrung mit React ist hilfreich, aber dieser Leitfaden führt Sie Schritt für Schritt durch das Wesentliche.

Einrichten des Projekts

1. Erstellen Sie ein neues Next.js-Projekt mit TypeScript:

Führen Sie den folgenden Befehl aus, um ein neues Next.js-Projekt zu erstellen. Wir verwenden TypeScript für eine bessere Typsicherheit:

   npx create-next-app@latest video-editor --typescript
   cd video-editor

Dieser Befehl richtet ein neues Next.js-Projekt mit dem Namen „video-editor“ mit aktiviertem TypeScript ein.

1. Erforderliche Pakete installieren:

Als nächstes installieren Sie die Abhängigkeiten, die wir für die Videowiedergabe (Remotion), Symbole (Lucide) und mehr benötigen:

   npm install @remotion/player remotion lucide-react

Mit diesen Paketen können wir einen Videoplayer (@remotion/player) erstellen, die Video-Rendering-Logik verwalten (Remotion) und Symbolunterstützung hinzufügen (Lucide).

1. Tailwind CSS einrichten:

Befolgen Sie die offizielle Tailwind CSS-Installationsanleitung, um Tailwind in Ihr Next.js-Projekt zu integrieren. Tailwind CSS macht die Gestaltung des Editors schneller und flexibler.

1. Kernkomponentendateien erstellen:

Erstellen Sie nun eine neue Datei „components/react-video-editor.tsx“, in der wir die Hauptstruktur für die Video-Editor-Komponente erstellen. Als Nächstes zerlegen wir diese Komponente in kleinere Teile wie die Zeitleiste und den Videoplayer.

Erstellen des Video-Editors

Nachdem die Projekteinrichtung abgeschlossen ist, fahren wir mit der Erstellung der Schlüsselkomponenten des Videoeditors fort. Wir beginnen mit dem Aufbau der Komponenten Timeline und Player und kombinieren dann alles in der Haupteditorkomponente.

Timeline-Komponente

In der Timeline können Benutzer ihre Videoclips und Texteinblendungen anordnen und visualisieren. Diese Komponente empfängt eine Reihe von Videoclips und Textüberlagerungen und zeigt sie auf einer Zeitleiste an.

Hier ist eine Grundstruktur für die Timeline-Komponente:

// components/Timeline.tsx
import React from 'react';
import { Clip, TextOverlay } from '@/types/types';

interface TimelineProps {
  clips: Clip[]; // Array of video clips
  textOverlays: TextOverlay[]; // Array of text overlays
  totalDuration: number; // The total duration of the video
}

const Timeline: React.FC<TimelineProps> = ({ clips, textOverlays, totalDuration }) => {
  // For now, we’ll just display the length of the video and the number of clips.
  return (
    <div>
      <h2>Total Duration: {totalDuration} seconds</h2>
      <p>Number of clips: {clips.length}</p>
      <p>Number of text overlays: {textOverlays.length}</p>
    </div>
  );
};

export default Timeline;

In diesem Beispiel definieren wir eine Timeline-Komponente, die Requisiten für die Videoclips, Textüberlagerungen und die gesamte Videodauer akzeptiert. In zukünftigen Schritten werden wir diese Komponente aktualisieren, um eine interaktive Zeitleiste mit Drag-and-Drop-Funktionalität anzuzeigen.

Spielerkomponente

Als nächstes erstellen wir die Player-Komponente. Diese Komponente verwendet Remotion, um die Videoclips zu rendern und das Video abzuspielen. Es nimmt die Videoclips und Texteinblendungen auf und übergibt sie an den Player von Remotion.

// components/Player.tsx
import React from 'react';
import { Player } from '@remotion/player'; // Import the Player component from Remotion
import { Clip, TextOverlay } from '@/types/types';

interface PlayerProps {
  clips: Clip[]; // Array of video clips
  textOverlays: TextOverlay[]; // Array of text overlays
  totalDuration: number; // Total duration of the video
}

const VideoPlayer: React.FC<PlayerProps> = ({ clips, textOverlays, totalDuration }) => {
  // Here, the Player component from Remotion will be used to render the video clips
  return (
    <div>
      <Player
        component={() => <div>Render video here</div>} // Temporary placeholder for rendering the video
        durationInFrames={totalDuration * 30} // Assuming 30 frames per second
        compositionWidth={1920} // Standard 1080p width
        compositionHeight={1080} // Standard 1080p height
        fps={30} // Frames per second
        controls // Display play/pause and other controls
      />
    </div>
  );
};

export default VideoPlayer;

Im obigen Code richten wir die VideoPlayer-Komponente für die Videowiedergabe mit der Player-Komponente von Remotion ein. Wir übergeben Requisiten wie „durationInFrames“ (das die Gesamtdauer basierend auf 30 Bildern pro Sekunde berechnet) und geben Standardvideoabmessungen an (1920 x 1080).

Hauptkomponente des Editors

Jetzt kombinieren wir die Komponenten Timeline und Player in der Haupteditorkomponente. Hier wird der Status für Videoclips und Overlays verwaltet und beide Komponenten werden zusammen gerendert.

// components/react-video-editor.tsx
import React, { useState } from 'react';
import Timeline from './Timeline';
import VideoPlayer from './Player';
import { Clip, TextOverlay } from '@/types/types';

const ReactVideoEditor: React.FC = () => {
  // State to hold video clips, text overlays, and total duration
  const [clips, setClips] = useState<Clip[]>([]); // Initial state: an empty array of video clips
  const [textOverlays, setTextOverlays] = useState<TextOverlay[]>([]); // Initial state: an empty array of text overlays
  const [totalDuration, setTotalDuration] = useState(10); // Example initial duration (in seconds)

  // For now, we’ll render the VideoPlayer and Timeline components
  return (
    <div className="flex flex-col text-white">
      <VideoPlayer clips={clips} textOverlays={textOverlays} totalDuration={totalDuration} />
      <Timeline clips={clips} textOverlays={textOverlays} totalDuration={totalDuration} />
      {/* Additional controls for adding clips and overlays will go here */}
    </div>
  );
};

export default ReactVideoEditor;

In dieser Haupteditorkomponente verwalten wir den Status der Videoclips, Textüberlagerungen und die Gesamtdauer mithilfe des useState-Hooks von React. Derzeit wird der Status mit leeren Arrays für Clips und Overlays initialisiert. Die VideoPlayer- und Timeline-Komponenten werden mit den entsprechenden Requisiten gerendert.

Anpassen und Erweitern

Da Sie nun über die Grundstruktur Ihres Videoeditors verfügen, können Sie damit beginnen, seine Funktionalität zu erweitern und anzupassen. Hier sind ein paar Ideen für den Einstieg:

• Drag-and-Drop-Funktionalität:Ermöglicht Benutzern das Neuanordnen von Clips auf der Timeline.
• Erweiterte Textüberlagerungen:Unterstützung für das Ändern von Schriftarten, Farben und Animationen für Text hinzufügen.
• Audio-Unterstützung: Ermöglicht Benutzern das Hochladen und Verwalten von Hintergrundmusiktiteln.
• Videoübergänge: Implementieren Sie sanfte Übergänge zwischen verschiedenen Videoclips.

Diese Funktionen tragen dazu bei, dass Ihr Editor interaktiver und benutzerfreundlicher wird, vergleichbar mit professionellen Bearbeitungstools wie Veed.io oder Descript. Wenn Sie nicht weiterkommen, können Sie die Open-Source-Version hier herunterladen. Oder spielen Sie hier mit der Live-Version.

Das obige ist der detaillierte Inhalt vonErstellen eines webbasierten Video-Editors mit Remotion, Next.js und Tailwind CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!