6 Years Building Video Players. 9B Requests. Starting Over

Summary

How Vidstack's Journey is Shaping Video.js v10This is part of a series on the making of Video.js v10. See also: Wesley on how Media Chrome's HTML-first architecture is evolving and Sam on how Plyr's design polish is shaping the UI.Between Vime and Vidstack: 9 billion CDN requests. 7 million NPM downloads. 6,200 GitHub stars. Over 200 releases. Now I'm building something better.My journey started in 2020 with a library called Vime. At the time, video players like Video.js and Plyr felt like black boxes. You dropped a script on your page and hoped for the best. Customization meant fighting against the library rather than working with it.Example scriptCheckCopiedCopyCopyCheckCopiedCopyCopy <video class="video-js" controls data-setup="{}"></video> <script src="<https://vjs.zencdn.net/8.23.4/video.min.js>"></script> Meanwhile, frameworks like Svelte were showing us what compiled components could be. Small, composable pieces. State that flowed predictably. A JS compiler target. I remember thinking: this is how we should build players. Why isn't anyone doing this?So I built one.I posted Vime on Reddit and it took off. People were actually using it. My first real open source project, and developers were building video players with it. That feeling never gets old.In retrospect, a lot of the excitement was probably just that I was using Svelte — the exciting new kid on the block.But honestly, I'd created something awkward. A bespoke plugin system that didn't feel natural to anyone. I hadn't really solved the problem. I'd just moved it around.Creating a player in Vime 1.x (built on Svelte)CheckCopiedCopyCopyCheckCopiedCopyCopyconst player = new Player({ target, props: { plugins: [ActionDisplay, Keyboard, Tooltips], }, });Here's what I learned about why video breaks people's expectations.Events ≠ state. The video element fires events, but they're inconsistent across browsers. They might fire, they might not, they might fire in rapid succession. Wiring up UI to these events is f...