如果您曾经想创建自己的强大的基于网络的视频编辑器（类似于 Veed.io 或 Descript 等流行工具），那么您来对地方了！在本分步指南中，我们将向您展示如何使用 Remotion、Next.js 和 Tailwind CSS 构建视频编辑器。最后，您将为开发自己的基于浏览器的视频编辑工具奠定坚实的基础。
基于网络的视频编辑器因其可访问性和易用性而变得越来越流行。通过使用 Remotion 进行视频渲染，使用 Next.js 进行强大的基于 React 的框架，使用 Tailwind CSS 进行快速且可自定义的样式，您可以构建灵活的直接在浏览器中操作的视频编辑工具。
在本指南中，我们将构建 React Video Editor 等工具的简化版本，允许用户排列视频剪辑、添加文本叠加以及实时预览视频。
在我们深入之前，请确保您已安装以下软件：
拥有一些 React 经验会很有帮助，但本指南将逐步引导您了解基本知识。
运行以下命令创建一个新的 Next.js 项目。我们将使用 TypeScript 来提高类型安全性：
npx create-next-app@latest video-editor --typescript cd video-editor
此命令会设置一个名为 video-editor 并启用 TypeScript 的全新 Next.js 项目。
接下来，安装视频渲染（Remotion）、图标（Lucide）等所需的依赖项：
npm install @remotion/player remotion lucide-react
这些包将允许我们创建视频播放器 (@remotion/player)、处理视频渲染逻辑 (Remotion) 并添加图标支持 (Lucide)。
按照官方 Tailwind CSS 安装指南将 Tailwind 与您的 Next.js 项目集成。 Tailwind CSS 将使编辑器的样式设计更快、更灵活。
现在，创建一个新文件 Components/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;
在此示例中，我们定义了一个时间轴组件，它接受视频剪辑、文本叠加和总视频持续时间的道具。在未来的步骤中，我们将更新此组件以显示具有拖放功能的交互式时间线。
接下来，我们将构建 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;
在上面的代码中，我们设置了 VideoPlayer 组件来使用 Remotion 的 Player 组件处理视频渲染。我们传入durationInFrames（根据每秒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 进行渲染。
现在您已经掌握了视频编辑器的基本结构，您可以开始扩展和自定义其功能。以下是一些可以帮助您入门的想法：
这些功能将帮助您的编辑器变得更具交互性和用户友好性，可与 Veed.io 或 Descript 等专业编辑工具相媲美。如果您感到困惑，请随时在此处下载开源版本。或者在这里玩一下现场版本。
以上是使用 Remotion、Next.js 和 Tailwind CSS 构建基于 Web 的视频编辑器的详细内容。更多信息请关注PHP中文网其他相关文章！
