使用 Remotion、Next.js 和 Tailwind CSS 建立基於 Web 的影片編輯器-js教程-PHP中文網

Building a Web-Based Video Editor with Remotion, Next.js, and Tailwind CSS

如果您曾經想創建自己的強大的基於網絡的視頻編輯器（類似於 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 進行渲染。