使用 Remotion、Next.js 和 Tailwind CSS 构建基于 Web 的视频编辑器

如果您曾经想创建自己的强大的基于网络的视频编辑器（类似于 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 经验会很有帮助，但本指南将逐步引导您了解基本知识。

设置项目

1. 使用 TypeScript 创建一个新的 Next.js 项目：

运行以下命令创建一个新的 Next.js 项目。我们将使用 TypeScript 来提高类型安全性：

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

此命令会设置一个名为 video-editor 并启用 TypeScript 的全新 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. 创建核心组件文件：

现在，创建一个新文件 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中文网其他相关文章！