Revideo Player 미리보기

Revideo Player는 브라우저에서 Scene을 인터랙티브하게 미리보기·타임라인 조작·디버깅할 수 있는 React 컴포넌트다. Studio는 그 Player + Vite dev server를 묶은 전용 개발 도구.

🧩 Player가 뭔가

Player는 React 컴포넌트라서 어디든 임포트해서 쓸 수 있다:

Studio (npm start 기본 진입점)
Next.js / Remix / 일반 React 앱
Storybook, MDX 데모 페이지
iframe 임베드 (SaaS에서 클라이언트 미리보기)

import {Player} from '@revideo/player-react';

<Player projectFile="src/project.ts" />

Player는 렌더를 트리거하지 않는다 — 영상 출력은 별도 renderVideo() 호출. Player는 순수하게 미리보기·디버깅 전용.

📦 설치

npm install @revideo/player-react

또는 peer 의존성 직접:

{
  "dependencies": {
    "@revideo/player-react": "^0.x",
    "@revideo/core": "^0.x",
    "@revideo/2d": "^0.x"
  }
}

🎮 기본 사용

1) 파일에서 직접

import {Player} from '@revideo/player-react';

export default function App() {
  return <Player projectFile="./src/project.ts" />;
}

2) `makeProject` 인스턴스 전달 (런타임)

import {Player} from '@revideo/player-react';
import project from './src/project';

export default function App() {
  return <Player project={project} />;
}

3) 동적 변수 주입

<Player
  project={project}
  variables={{userName: '김철수', plan: 'pro'}}
  onReady={(p) => p.setVariables({userName: '이영희'})}
/>

변수 변경 시 Player는 Scene을 다시 평가한다. 미리보기 결과를 즉시 확인할 수 있어 반복 편집 workflow에 핵심.

🎚️ 주요 Props

Prop	타입	설명
`project` \| `projectFile`	`Project` \| `string`	렌더링할 프로젝트. 둘 중 하나 필수
`variables`	`Record<string, any>`	초기 변수
`playing`	`boolean`	자동 재생 여부
`controls`	`boolean`	기본 컨트롤바 표시 (기본 true)
`width`, `height`	`number` \| `string`	캔버스 크기
`onReady`	`(player) => void`	마운트 완료 콜백
`onFrame`	`(frame, time) => void`	매 프레임 콜백 — 분석/디버깅용
`onError`	`(err) => void`	Scene 평가 에러

🛠️ Player API (ref)

onReady로 받는 player 인스턴스:

<Player
  project={project}
  ref={(p) => (window.player = p)}
  onReady={(p) => {
    p.togglePlay();                  // 재생/일시정지
    p.seek(5);                       // 5초로 점프
    p.setVariables({user: 'B'});     // 변수 변경
    p.reload();                      // Scene 다시 평가
    p.duration();                    // 전체 길이 (초)
    p.currentTime();                 // 현재 시간
  }}
/>

메서드	용도
`togglePlay()`	재생/정지 토글
`play()` / `pause()`	명시적 제어
`seek(seconds)`	특정 시점으로 이동
`setVariables(v)`	변수 부분 갱신
`reload()`	Scene 재평가 (코드 변경 후)
`duration()` / `currentTime()`	길이/위치 조회
`getCanvasNode()`	캔버스 DOM 노드 (스크린샷 등)

🧪 디버깅 워크플로우

npm start

localhost:3000 (Studio) 접속
왼쪽 패널에 Scene 트리, 오른쪽에 캔버스
variables 슬라이더 만지면서 즉시 확인
Ctrl+Shift+I (Chrome DevTools) — __REVIDEO_LOG__ 객체에 프레임 단위 상태

Player의 진짜 가치: 코드 수정 → Ctrl+S → 자동 reload → 변수 슬라이더로 즉시 미리보기. Remotion의 Editor 모드와 같은 역할.

🆚 Studio vs Player vs 렌더

	Studio	Player (raw)	renderVideo()
용도	로컬 개발	임베디드 미리보기	mp4 출력
포함 도구	Player + 트리 패널 + 변수 UI	캔버스 + 컨트롤바	콘솔/큐
접근	`npm start`	React 임포트	Node 스크립트

🚀 다음 단계

작업	가이드
SaaS 만들기	Revideo SaaS Template
렌더 엔드포인트 만들기	Revideo 렌더링 서비스 배포
공식 Render Endpoint	Revideo 플랫폼 Render Endpoint

🔗 공식 리소스

공식 문서: https://midrender.com/revideo/docs/guide/building-webapps/using-the-player
GitHub: https://github.com/midrender/revideo

상위 문서: ← Revideo 웹앱 & Player 출처: Revideo 공식 문서 — Video Preview with Player 한글화 (2026-07-29) 공급사: Revideo (현 Midrender)

변경 이력

날짜	변경
2026-07-29	초안 작성 — Player React 컴포넌트 + props/API 표 + 디버깅 워크플로우