Membina Editor Video Berasaskan Web dengan Remotion, Next.js dan 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 の経験があると役に立ちますが、このガイドでは基本事項を段階的に説明します。

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

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

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

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

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

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

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

   npm install @remotion/player remotion lucide-react

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

1. Tailwind CSS を設定します:

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

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

次に、ビデオ エディター コンポーネントの主な構造を構築する新しいファイルコンポーネント/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;

この例では、ビデオ クリップ、テキスト オーバーレイ、合計ビデオ時間の小道具を受け入れる 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;

上記のコードでは、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;

このメイン エディター コンポーネントでは、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!