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

php中文网 2024-10-15 11:47:25

如果您曾经想创建自己的强大的基于网络的视频编辑器（类似于 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 }) =&gt; {
  // 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;
</timelineprops>

在此示例中，我们定义了一个时间轴组件，它接受视频剪辑、文本叠加和总视频持续时间的道具。在未来的步骤中，我们将更新此组件以显示具有拖放功能的交互式时间线。

播放器组件

接下来，我们将构建 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 }) =&gt; {
  // 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
      /&gt;
    </player>
</div>
  );
};

export default videoplayer;
</playerprops>

在上面的代码中，我们设置了 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 = () =&gt; {
  // 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}"></videoplayer><timeline clips="{clips}" textoverlays="{textOverlays}" totalduration="{totalDuration}"></timeline>
      {/* Additional controls for adding clips and overlays will go here */}
    </div>
  );
};

export default ReactVideoEditor;
</textoverlay></clip>

在这个主编辑器组件中，我们使用 react 的 usestate 挂钩来管理视频剪辑的状态、文本叠加和总持续时间。目前，状态是用剪辑和覆盖的空数组初始化的。 videoplayer 和 timeline 组件使用适当的 props 进行渲染。