Membina Editor Video Berasaskan Web dengan Remotion, Next.js dan Tailwind CSS-tutorial js-php.cn

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

Veed.io や Descript などの人気のあるツールに似た、独自の強力な Web ベースのビデオエディターを作成したいと思ったことがあるなら、ここが正しい場所です。このステップバイステップガイドでは、Remotion、Next.js、Tailwind CSS を使用してビデオエディターを構築する方法を説明します。最終的には、独自のブラウザベースのビデオ編集ツールを開発するための強固な基盤が得られるでしょう。

導入

Web ベースのビデオエディタは、そのアクセシビリティと使いやすさにより、ますます人気が高まっています。ビデオのレンダリングには Remotion、強力な React ベースのフレームワークには Next.js、高速でカスタマイズ可能なスタイルには Tailwind CSS を使用することで、柔軟なブラウザ上で直接動作するビデオ編集ツールです。

このガイドでは、ユーザーがビデオクリップを配置し、テキストオーバーレイを追加し、リアルタイムでビデオをプレビューできるようにする、React Video Editor などのツールの簡易バージョンを構築します。

前提条件

本題に入る前に、以下がインストールされていることを確認してください:

Node.js (v14 以降)
npm (Node.js にバンドルされています)
コードエディタ (例: Visual Studio Code)

React の経験があると役に立ちますが、このガイドでは基本事項を段階的に説明します。

プロジェクトのセットアップ

TypeScript を使用して新しい Next.js プロジェクトを作成します:

次のコマンドを実行して、新しい Next.js プロジェクトを作成します。タイプセーフ性を高めるために TypeScript を使用します:

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

Salin selepas log masuk

このコマンドは、TypeScript が有効になった video-editor という名前の新しい Next.js プロジェクトをセットアップします。

必要なパッケージをインストールします:

次に、ビデオレンダリング (Remotion)、アイコン (Lucide) などに必要な依存関係をインストールします。

   npm install @remotion/player remotion lucide-react

Salin selepas log masuk

これらのパッケージを使用すると、ビデオプレーヤー (@remotion/player) の作成、ビデオレンダリングロジックの処理 (Remotion)、アイコンサポート (Lucide) の追加が可能になります。

Tailwind CSS を設定します:

Tailwind の公式 CSS インストールガイドに従って、Tailwind を Next.js プロジェクトと統合します。 Tailwind CSS は、エディターのスタイル設定をより高速かつ柔軟にします。

コアコンポーネントファイルの作成:

次に、ビデオエディターコンポーネントの主な構造を構築する新しいファイルコンポーネント/react-video-editor.tsx を作成します。次に、このコンポーネントをタイムラインやビデオプレーヤーなどの小さな部分に分割します。

ビデオエディターの構築

プロジェクトのセットアップが完了したら、ビデオエディターの主要なコンポーネントの作成に進みましょう。まず Timeline コンポーネントと Player コンポーネントを構築し、次にメインエディターコンポーネントのすべてを組み合わせます。

タイムラインコンポーネント

タイムラインは、ユーザーがビデオクリップやテキストオーバーレイを整理して視覚化する場所です。このコンポーネントはビデオクリップとテキストオーバーレイの配列を受け取り、タイムライン上に表示します。

タイムラインコンポーネントの基本構造は次のとおりです。

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

Salin selepas log masuk

この例では、ビデオクリップ、テキストオーバーレイ、合計ビデオ時間の小道具を受け入れる Timeline コンポーネントを定義します。今後のステップでは、このコンポーネントを更新して、ドラッグアンドドロップ機能を備えたインタラクティブなタイムラインを表示します。

プレーヤーコンポーネント

次に、Player コンポーネントを構築します。このコンポーネントは、Remotion を使用してビデオクリップをレンダリングし、ビデオを再生します。ビデオクリップとテキストオーバーレイを取り込んで、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;

Salin selepas log masuk

上記のコードでは、Remotion の Player コンポーネントを使用してビデオのレンダリングを処理するように VideoPlayer コンポーネントを設定しました。私たちは、durationInFrames (1 秒あたり 30 フレームに基づいて合計時間を計算する) などの小道具を渡し、標準のビデオサイズ (1920x1080) を指定します。

メインエディタコンポーネント

次に、メインエディターコンポーネントで Timeline コンポーネントと Player コンポーネントを結合しましょう。ここでビデオクリップとオーバーレイの状態が管理され、両方のコンポーネントが一緒にレンダリングされます。

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

Salin selepas log masuk

このメインエディターコンポーネントでは、React の useState フックを使用して、ビデオクリップ、テキストオーバーレイ、合計再生時間の状態を管理します。現時点では、状態はクリップとオーバーレイの空の配列で初期化されています。 VideoPlayer コンポーネントと Timeline コンポーネントは、適切な props を使用してレンダリングされます。

Menyesuaikan dan Memperluas

Sekarang anda mempunyai struktur asas editor video anda, anda boleh mula memanjangkan dan menyesuaikan fungsinya. Berikut ialah beberapa idea untuk anda bermula:

Fungsi seret dan lepas: Membolehkan pengguna menyusun semula klip pada garis masa.
Tindanan teks lanjutan: Tambahkan sokongan untuk menukar fon, warna dan animasi untuk teks.
Sokongan audio: Benarkan pengguna memuat naik dan mengurus trek muzik latar belakang.
Peralihan video: Laksanakan peralihan lancar antara klip video yang berbeza.

Ciri ini akan membantu editor anda menjadi lebih interaktif dan mesra pengguna, setanding dengan alat penyuntingan profesional seperti Veed.io atau Descript. Jika anda berasa buntu, sila tarik turun versi sumber terbuka di sini. Atau mainkan versi langsung di sini.

Atas ialah kandungan terperinci Membina Editor Video Berasaskan Web dengan Remotion, Next.js dan Tailwind CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!