Création d'un éditeur vidéo basé sur le Web avec Remotion, Next.js et Tailwind CSS-js tutoriel-php.cn

Building a Web-Based Video Editor with Remotion, Next.js, and Tailwind CSS

Si vous avez toujours voulu créer votre propre éditeur vidéo puissant basé sur le Web, similaire aux outils populaires comme Veed.io ou Descript, vous êtes au bon endroit ! Dans ce guide étape par étape, nous allons vous montrer comment créer un éditeur vidéo à l'aide de Remotion, Next.js et Tailwind CSS. À la fin, vous disposerez d'une base solide pour développer votre propre outil de montage vidéo basé sur un navigateur.

Introduction

Les éditeurs vidéo basés sur le Web deviennent de plus en plus populaires en raison de leur accessibilité et de leur facilité d'utilisation. En utilisant Remotion pour le rendu vidéo, Next.js pour un puissant framework basé sur React et Tailwind CSS pour un style rapide et personnalisable, vous pouvez créer un outil de montage vidéo qui fonctionne directement dans le navigateur.

Dans ce guide, nous allons créer une version simplifiée d'outils tels que React Video Editor, permettant aux utilisateurs d'organiser des clips vidéo, d'ajouter des superpositions de texte et de prévisualiser leurs vidéos en temps réel.

Conditions préalables

Avant de plonger dans le vif du sujet, assurez-vous d'avoir installé les éléments suivants :

Node.js (v14 ou version ultérieure)
npm (fourni avec Node.js)
Éditeur de code (par exemple, Visual Studio Code)

Avoir une certaine expérience avec React sera utile, mais ce guide vous guidera à travers les bases étape par étape.

Mise en place du projet

Créez un nouveau projet Next.js avec TypeScript :

Exécutez la commande suivante pour créer un nouveau projet Next.js. Nous utiliserons TypeScript pour une meilleure sécurité des types :

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

Copier après la connexion

Cette commande configure un nouveau projet Next.js nommé video-editor avec TypeScript activé.

Installer les packages requis :

Ensuite, installez les dépendances dont nous avons besoin pour le rendu vidéo (Remotion), les icônes (Lucide) et plus :

   npm install @remotion/player remotion lucide-react

Copier après la connexion

Ces packages nous permettront de créer un lecteur vidéo (@remotion/player), de gérer la logique de rendu vidéo (Remotion) et d'ajouter la prise en charge des icônes (Lucide).

Configurer Tailwind CSS :

Suivez le guide d'installation officiel de Tailwind CSS pour intégrer Tailwind à votre projet Next.js. Tailwind CSS rendra le style de l'éditeur plus rapide et plus flexible.

Créer des fichiers de composants principaux :

Maintenant, créez un nouveau fichier composants/react-video-editor.tsx dans lequel nous allons construire la structure principale du composant éditeur vidéo. Nous allons ensuite diviser ce composant en éléments plus petits, comme la chronologie et le lecteur vidéo.

Construire l'éditeur vidéo

Une fois la configuration du projet terminée, passons à la création des composants clés de l'éditeur vidéo. Nous commencerons par créer les composants Timeline et Player, puis combinerons le tout dans le composant éditeur principal.

Composant de chronologie

La Timeline est l'endroit où les utilisateurs organiseront et visualiseront leurs clips vidéo et leurs superpositions de texte. Ce composant recevra un tableau de clips vidéo et de superpositions de texte et les affichera sur une chronologie.

Voici une structure de base pour le composant chronologie :

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

Copier après la connexion

Dans cet exemple, nous définissons un composant Timeline qui accepte les accessoires pour les clips vidéo, les superpositions de texte et la durée totale de la vidéo. Dans les étapes suivantes, nous mettrons à jour ce composant pour afficher une chronologie interactive avec une fonctionnalité glisser-déposer.

Composant joueur

Ensuite, nous allons créer le composant Player. Ce composant utilise Remotion pour restituer les clips vidéo et lire la vidéo. Il récupère les clips vidéo et les superpositions de texte et les transmet au lecteur de 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;

Copier après la connexion

Dans le code ci-dessus, nous avons configuré le composant VideoPlayer pour gérer le rendu vidéo à l'aide du composant Player de Remotion. Nous passons des accessoires tels que durationInFrames (qui calcule la durée totale sur la base de 30 images par seconde) et spécifions les dimensions vidéo standard (1920x1080).

Composant principal de l'éditeur

Maintenant, combinons les composants Timeline et Player dans le composant éditeur principal. C'est ici que l'état des clips vidéo et des superpositions sera géré, et les deux composants seront rendus ensemble.

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

Copier après la connexion

Dans ce composant d'éditeur principal, nous gérons l'état des clips vidéo, les superpositions de texte et la durée totale à l'aide du hook useState de React. Pour l'instant, l'état est initialisé avec des tableaux vides pour les clips et les superpositions. Les composants VideoPlayer et Timeline sont rendus avec les accessoires appropriés.