Remotion Adding Video

Remotion에 영상 클립을 넣는 가장 표준적인 방법은 <Video> 컴포넌트다. React에서 일반 <video>처럼 다루면서도 프레임 단위 동기화가 자동으로 처리된다.

---

🎬 기본 사용법

import { AbsoluteFill, Video, staticFile } from "remotion";

export const MyComposition = () => {
  return (
    <AbsoluteFill>
      <Video src={staticFile("my-video.mp4")} />
    </AbsoluteFill>
  );
};

staticFile()은 public/ 디렉터리의 파일을 가리킨다. 영상은 컴포지션의 총 프레임 길이에 맞춰 자동 조정된다.

---

✂️ 부분 자르기 (Trim)

속성	의미
startFrom	영상 내부 시작 프레임 (seconds×fps)
endAt	영상 내부 종료 프레임
trimBefore / trimAfter	더 직관적인 시간(second) 기반 자르기

<Video
  src={staticFile("clip.mp4")}
  startFrom={30}      // 1초 지점부터
  endAt={90}          // 3초 지점까지만
/>

---

⏱️ 다른 속도로 재생

playbackRate로 영상 속도 조절:

<Video src={staticFile("clip.mp4")} playbackRate={2} />  // 2배속
<Video src={staticFile("clip.mp4")} playbackRate={0.5} /> // 0.5배속

---

🔁 루프

loop prop을 주면 영상이 끝까지 재생된 후 자동으로 처음부터 다시 시작:

<Video src={staticFile("bg.mp4")} loop />

---

🎨 시각 효과

prop	설명
volume	음량 (0~1)
muted	음소거
style	일반 CSS (width, height, transform 등)
playbackRate	배속 (음수면 역재생)

<Video
  src={staticFile("clip.mp4")}
  style={{ width: 800, height: 450, transform: "scale(1.2)" }}
  muted
  volume={0.5}
/>

---

🖼️ 영상을 배경으로 (Cover / Background)

화면을 가득 채우는 배경 영상을 만들 때는 <AbsoluteFill>로 감싸고 objectFit: "cover" 스타일을 사용한다:

<AbsoluteFill>
  <Video
    src={staticFile("bg.mp4")}
    style={{ width: "100%", height: "100%", objectFit: "cover" }}
  />
</AbsoluteFill>

---

⚠️ 알아둘 점

• <Video>는 React 컴포넌트라서 useCurrentFrame()과 함께 사용 가능 — style을 프레임마다 변경해 애니메이션 가능
• 비디오는 렌더 시 한 번 디코딩되므로 큰 파일은 미리 인코딩 최적화 권장
• MP4/H.264는 호환성 최고. WebM/VP9는 일부 환경에서 제한될 수 있음
• 투명 비디오(ProRes 4444 등)는 투명 비디오 가이드 참고

---

📚 영역 구분

• 오디오 추가: Remotion Adding Audio
• 자막/캡션: Remotion Captions
• 한글 hub: Remotion 비주얼 & 미디어

상위 문서: ← Remotion 비주얼 & 미디어 출처: Remotion 공식 문서 — Adding video 한글화 (2026-07-29) 공급사: Remotion AG

변경 이력

날짜	변경
2026-07-29	초판 작성 (공식 Adding video 가이드 한글화)
2026-07-29	메타데이터 블록을 본문 하단으로 이동