Remotion Player — 웹 브라우저에서 비디오를 실시간 재생
@remotion/player로 React 앱에 인터랙티브 비디오 미리보기를 임베드
Remotion은 비디오 렌더링뿐 아니라 브라우저에서의 실시간 재생도 지원합니다.
@remotion/player 패키지의 <Player> 컴포넌트를 React 앱에 임베드하면, Remotion Composition을 웹 페이지에서 바로 재생할 수 있습니다. 재생/일시정지, 시크바, 전체화면 등 기본 비디오 컨트롤을 제공합니다.
가장 강력한 점은 인터랙티브 미리보기입니다. 사용자가 텍스트를 입력하거나 색상을 바꾸면, Player의 inputProps를 업데이트하여 즉시 비디오 미리보기에 반영됩니다. MP4로 렌더링하기 전에 결과를 확인할 수 있어, SaaS 비디오 에디터의 핵심 UI가 됩니다.
주의: Player는 브라우저에서 React를 실시간 렌더링하는 것이므로, 복잡한 컴포넌트는 프레임 드롭이 발생할 수 있습니다. 최종 출력은 반드시 npx remotion render 또는 Lambda로 렌더링해야 합니다.
동작 흐름
npm install @remotion/player로 패키지 설치
<Player component={MyVideo} durationInFrames={150} fps={30} ... />로 React 앱에 임베드
inputProps={{ title: userInput, color: selectedColor }}로 사용자 입력을 비디오에 실시간 반영
미리보기에서 만족하면 renderMediaOnLambda() 또는 서버사이드 렌더링으로 최종 MP4 생성
장점
- ✓ 즉시 미리보기: 렌더링 대기 없이 변경사항을 실시간 확인
- ✓ React 앱에 자연스럽게 통합: 기존 상태 관리(Redux, Zustand 등)와 연동
- ✓ MP4보다 가벼움: 동적 콘텐츠를 비디오 파일 없이 전달 가능
단점
- ✗ 성능 제약: 브라우저 렌더링이므로 복잡한 장면에서 프레임 드롭 발생 가능
- ✗ 오디오 자동재생 제한: 브라우저의 autoplay 정책으로 사용자 인터랙션 없이 오디오 재생 불가