Veed.io や Descript などの人気のあるツールに似た、独自の強力な Web ベースのビデオ エディターを作成したいと思ったことがあるなら、ここが正しい場所です。このステップバイステップ ガイドでは、Remotion、Next.js、Tailwind CSS を使用してビデオ エディターを構築する方法を説明します。最終的には、独自のブラウザベースのビデオ編集ツールを開発するための強固な基盤が得られるでしょう。
Web ベースのビデオエディタは、そのアクセシビリティと使いやすさにより、ますます人気が高まっています。ビデオのレンダリングには Remotion、強力な React ベースのフレームワークには Next.js、高速でカスタマイズ可能なスタイルには Tailwind CSS を使用することで、柔軟なブラウザ上で直接動作するビデオ編集ツールです。
このガイドでは、ユーザーがビデオ クリップを配置し、テキスト オーバーレイを追加し、リアルタイムでビデオをプレビューできるようにする、React Video Editor などのツールの簡易バージョンを構築します。
本題に入る前に、以下がインストールされていることを確認してください:
React の経験があると役に立ちますが、このガイドでは基本事項を段階的に説明します。
次のコマンドを実行して、新しい Next.js プロジェクトを作成します。タイプセーフ性を高めるために TypeScript を使用します:
npx create-next-app@latest video-editor --typescript cd video-editor
このコマンドは、TypeScript が有効になった video-editor という名前の新しい Next.js プロジェクトをセットアップします。
次に、ビデオレンダリング (Remotion)、アイコン (Lucide) などに必要な依存関係をインストールします。
npm install @remotion/player remotion lucide-react
これらのパッケージを使用すると、ビデオ プレーヤー (@remotion/player) の作成、ビデオ レンダリング ロジックの処理 (Remotion)、アイコン サポート (Lucide) の追加が可能になります。
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;
この例では、ビデオ クリップ、テキスト オーバーレイ、合計ビデオ時間の小道具を受け入れる 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 を使用してレンダリングされます。
Now that you’ve got the basic structure of your video editor, you can begin to extend and customize its functionality. Here are a few ideas to get you started:
These features will help your editor become more interactive and user-friendly, comparable to professional editing tools like Veed.io or Descript. If you are feeling stuck feel free to pull down the open source version here. Or have a play with the live version here.
以上がRemotion、Next.js、Tailwind CSS を使用した Web ベースのビデオ エディターの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
