Building a video editor with React
summary
Builds a working web video editor using React and Remotion Player with local blob previews, uploads via AWS S3 pre‑signed URLs, and serverless rendering on Remotion Lambda. Uses useState for tracks/items, renders items in DOM order instead of z‑index to solve interaction layering, and extracts audio to send to OpenAI Whisper for captions, then formats them with Remotion’s captions package and a fit‑text step. Demonstrates upload progress, timeline sequencing, caption pages, and produces a final MP4 render that successfully downloads.
AI-written summary · about
chapters (10)
- 0:00Why build on the web
- 1:09Introducing Remotion
- 3:42Custom controls for editor
- 4:03Defining data structure
- 7:18Handling file uploads
- 10:35Editing content basics
- 14:57Adding AI captions
- 20:01Live demo of editor
- 22:12Rendering with Lambda
- 26:10Project goals and source code
related talks
01h 14mCreate Videos… with React!
23mCreating Videos Programmatically in React
13mCreating videos... with React!
21mVideo Creation in a JavaScript World
37mCode Your Videos: Programmatic Video Creation with Javascript
36mRemotion: How to Create Videos by Programming
16mDemocratizing live video with React
19mMaking videos in React Native