An interactive video timeline React library supporting forward/reverse marker playback
Every time I built interactive video storytelling, I had to repeatedly develop the same complex logic: timestamp-based events, reverse playback, chaining multiple videos. Plain HTML5 video alone made it hard to create a smooth storytelling experience, and re-implementing similar functionality each time made it hard to focus on the storytelling itself.
The goal was to build a React component library that delivered a smooth, multi-video timeline experience with instant seeking and no buffering stutter, freeing developers to focus on the storytelling itself.
Implemented seamless seeking using preloading and blob caching, and built a smooth timeline connecting multiple videos along with an interactive marker system that automatically fires callbacks at specific timestamps. Designed a simple API for controlling forward and reverse playback, aiming for a consistent developer experience.
Consolidated the interactive video logic I kept reimplementing into a single component and published it as an npm package. Ended up with a reusable tool for short-form video storytelling or play/reverse-play interfaces.
Key features: Instant, buffer-free seeking, an interactive marker system, multi-video timelines
Best for: Short, flow-driven video storytelling, play/reverse-play interfaces
Technical highlights: Blob caching, preloading, GOP-1 optimization support