Video Editing in the Browser
summary
Browsers now expose real building blocks for editing: WebCodecs for hardware‑accelerated encode/decode, TensorFlow.js for background removal, and Whisper compiled into WASM for speech‑to‑text. An end‑to‑end editor runs in ~500 lines of code and re-encodes videos at roughly the same speed as Final Cut Pro, but video frames require out‑of‑order decoding because of interframe codecs, containers carry complex timestamps and blobs, and WASM often loses to plain JavaScript due to expensive memory copies.
AI-written summary · about
chapters (12)
- 0:00Browser video editing intro
- 2:25Video API false assumptions
- 3:55Raw video data impractical
- 5:01Image compression primer
- 10:24Video compression file size
- 12:33Keyframes and delta frames
- 15:45Video decoding timestamps
- 16:06Web Codecs API challenges
- 20:17Hardware acceleration
- 21:41WebAssembly video speed
- 24:57Video encoding demo
- 26:00jQuery for video editing
related talks
24mVideo Editing in the Browser
12mExploring Video Editing in the Browser
12mEditing video simply by editing text, in the browser: a meta story
25mLessons in WebAssembly: Client Side Video Editing
21mDynamic video in the browser
47mVideo transcoding on the web
19mPuppeteer + canvas + WebCodecs to replace
30mOther browser APIs that are going to change video on the web