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

学习文章要努力，但是不要急！今天的这篇文章《使用 Remotion、Nextjs 和 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、Nextjs 和 Tailwind CSS 构建基于 Web 的视频编辑器》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！