Remotion, Next.js 및 Tailwind CSS를 사용하여 웹 기반 비디오 편집기 구축-JS 튜토리얼-php.cn

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

Veed.io 또는 Descript와 같은 인기 도구와 유사한 강력한 웹 기반 비디오 편집기를 만들고 싶다면 바로 이곳에 오셨습니다! 이 단계별 가이드에서는 Remotion, Next.js 및 Tailwind CSS를 사용하여 비디오 편집기를 구축하는 방법을 보여줍니다. 결국에는 자신만의 브라우저 기반 비디오 편집 도구를 개발할 수 있는 탄탄한 기반을 갖게 될 것입니다.

소개

웹 기반 비디오 편집기는 접근성과 사용 편의성으로 인해 점점 더 인기를 얻고 있습니다. 비디오 렌더링에 Remotion, 강력한 React 기반 프레임워크에 Next.js, 빠르고 사용자 정의 가능한 스타일에 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

로그인 후 복사

이 명령은 TypeScript가 활성화된 video-editor라는 새로운 Next.js 프로젝트를 설정합니다.

필수 패키지 설치:

다음으로 비디오 렌더링(Remotion), 아이콘(Lucide) 등에 필요한 종속성을 설치합니다.

   npm install @remotion/player remotion lucide-react

로그인 후 복사

이러한 패키지를 사용하면 비디오 플레이어(@remotion/player)를 생성하고 비디오 렌더링 로직(Remotion)을 처리하며 아이콘 지원(Lucide)을 추가할 수 있습니다.

Tailwind CSS 설정:

공식 Tailwind CSS 설치 가이드에 따라 Tailwind를 Next.js 프로젝트와 통합하세요. Tailwind CSS를 사용하면 편집기 스타일을 더 빠르고 유연하게 만들 수 있습니다.

핵심 구성 요소 파일 만들기:

이제 비디오 편집기 구성 요소의 기본 구조를 구축할 새 파일 구성 요소/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;

로그인 후 복사

이 예에서는 비디오 클립, 텍스트 오버레이 및 총 비디오 재생 시간에 대한 prop을 허용하는 타임라인 구성 요소를 정의합니다. 향후 단계에서는 드래그 앤 드롭 기능을 갖춘 대화형 타임라인을 표시하도록 이 구성 요소를 업데이트할 것입니다.

플레이어 구성요소

다음으로 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;

로그인 후 복사

위 코드에서는 Remotion의 Player 구성 요소를 사용하여 비디오 렌더링을 처리하도록 VideoPlayer 구성 요소를 설정했습니다. 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 구성 요소는 적절한 prop을 사용하여 렌더링됩니다.

사용자 정의 및 확장

이제 동영상 편집기의 기본 구조가 완성되었으므로 기능을 확장하고 맞춤설정할 수 있습니다. 시작하는 데 도움이 되는 몇 가지 아이디어는 다음과 같습니다.

드래그 앤 드롭 기능: 사용자가 타임라인에서 클립을 재정렬할 수 있습니다.
고급 텍스트 오버레이: 텍스트의 글꼴, 색상, 애니메이션 변경에 대한 지원을 추가합니다.
오디오 지원: 사용자가 배경 음악 트랙을 업로드하고 관리할 수 있도록 허용합니다.
동영상 전환: 다양한 동영상 클립 간에 원활한 전환을 구현합니다.

이러한 기능은 Veed.io 또는 Descript와 같은 전문 편집 도구에 필적할 정도로 편집기를 더욱 상호 작용적이고 사용자 친화적으로 만드는 데 도움이 됩니다. 막히는 것 같으면 여기에서 오픈 소스 버전을 자유롭게 풀다운하세요. 아니면 여기에서 라이브 버전으로 플레이해 보세요.

위 내용은 Remotion, Next.js 및 Tailwind CSS를 사용하여 웹 기반 비디오 편집기 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!