如果您曾经想创建自己的强大的基于网络的视频编辑器（类似于 veed.io 或 descript 等流行工具），那么您来对地方了！在本分步指南中，我们将向您展示如何使用 remotion、next.js 和 tailwind css 构建视频编辑器。最后，您将为开发自己的基于浏览器的视频编辑工具奠定坚实的基础。
介绍
基于网络的视频编辑器因其可访问性和易用性而变得越来越流行。通过使用 remotion 进行视频渲染，使用 next.js 进行强大的基于 react 的框架，使用 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
此命令会设置一个名为 video-editor 并启用 typescript 的全新 next.js 项目。
- 安装所需的软件包：
接下来，安装视频渲染（remotion）、图标（lucide）等所需的依赖项：
npm install @remotion/player remotion lucide-react
这些包将允许我们创建视频播放器 (@remotion/player)、处理视频渲染逻辑 (remotion) 并添加图标支持 (lucide)。
- 设置 tailwind css：
按照官方 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 等专业编辑工具相媲美。如果您感到困惑，请随时在此处下载开源版本。或者在这里玩一下现场版本。
