Sixteen years ago, Video.js existed to drag the web off Flash. That job is long done. So the team did something most mature libraries never dare to do — they threw the architecture out and started over.
Video.js v10 just hit beta. It's not a version bump. It's a rewrite, built together by the people behind Video.js, Plyr, Vidstack, and Media Chrome — four projects with around 75,000 GitHub stars between them and tens of billions of video plays a month. That's a lot of pride to swallow to merge efforts. They did it anyway.
Here's what actually changed, what it means for you, and whether you should touch it yet.
The headline: your player just lost 88% of its weight
This is the part that makes you sit up. The default v10 player bundle is 88% smaller than v8. Compare like-for-like configurations (ABR stripped out) and it's still 66% smaller.
Real numbers, because vague percentages are cheap:
- A simple React "hello world" player → under 5 kB gzipped
- Standard HTML video player → 25.1 kB gzipped (v8 core was 75.2 kB)
- Audio player (HTML) → 23.0 kB gzipped
- Background video (React) → 3.5 kB gzipped
If you've ever watched a video player balloon your bundle and tank your Lighthouse score, you know why this matters. A 75 kB core for a feature half your users never trigger is the kind of bloat we've all just... accepted. v10 stops accepting it.
The trick is that nothing ships unless you ask for it. Drop DRM, ads, live support, adaptive bitrate — and the code for them never enters your bundle. The HLS streaming engine, composed through their new Streaming Processor Framework, comes in at 12.1 kB gzipped. HLS.js-light is 103.4 kB. That's not an optimization. That's a different category.
Composable, not monolithic — the part that changes how you build
v8 was a monolith. One big controller, pseudo-elements everywhere, CSS specificity wars when you wanted to restyle a button. Anyone who's fought a !important battle against a video player skin knows the feeling.
v10 splits the player into three pieces that talk through clean API contracts:
- State — the player logic. Optional features come in as composable slices you opt into.
- UI — unstyled primitives, inspired by Base UI and Radix. Real DOM elements, not pseudo-element hacks.
- Media — handles playback on its own.
The UI shift is the one I'd flag hardest. Instead of fighting opaque pseudo-elements, you get composed subcomponents you can actually grab and control. A React TimeSlider is built from Root, Track, Buffer, Fill, Thumb — name them, style them, reorder them. And you can "eject" a skin to own its source code outright, the same move that made shadcn/ui click for so many devs. If you've read why developers choose shadcn/ui over Radix UI, this philosophy will feel familiar — ship the code into the project, stop hiding it behind config.
React is finally a first-class citizen
For years, using Video.js in React meant a wrapper and a prayer. v10 makes React a real target.
import { createPlayer } from '@videojs/react';
import { videoFeatures, VideoSkin, Video } from '@videojs/react/video';
const Player = createPlayer({
features: videoFeatures,
});
function App() {
return (
<Player.Provider>
<VideoSkin>
<Video src="video.mp4" />
</VideoSkin>
</Player.Provider>
);
}
Prefer the platform? Web Components get equal treatment:
<video-player>
<video-skin>
<video src="video.mp4"></video>
</video-skin>
</video-player>
TypeScript and Tailwind are included on both paths. No more bolting types on after the fact. If you're keeping up with the React side of things, this pairs nicely with what shipped in React 19.2.
Skins that don't look like 2014
Sam Potts — the guy who built Plyr — did the default skins. There's a polished "default" skin with a frosted look, real animations, and controls that feel considered, plus a stripped "minimal" skin to build from.
Small detail that says a lot: both skins ship with proper error dialogs that match the design. v8 left its error states ugly for roughly a decade. Someone finally cared. That kind of thing tells you the rewrite wasn't only about kilobytes.
Three presets to start from
You don't compose from zero every time. v10 ships three use-case presets:
- Video — general website playback, the HTML
<video>tag's natural replacement. - Audio — podcasts and audio content.
- Background video — hero sections and landing-page backgrounds. Ships the layout, drops controls and audio handling because you don't need them there.
Presets are starting points, not cages. Add, swap, or rip out components freely.
Built to be built with AI
This is the quietly interesting bit. v10 doesn't ship flashy AI playback features — those are later. Instead, it optimizes for the experience of building with an AI agent.
- Less-abstracted components mean an agent works with code that's actually in your project, not buried behind layers of indirection it has to chase.
- llms.txt support gives framework-specific docs that AI tools can navigate cleanly.
- Markdown docs everywhere — tools like Claude Code receive markdown via the right HTTP headers, so they spend less context decoding HTML.
- A growing repo of AI skills for assisted builds.
The team even slipped a thank-you to Claude into the post, owning up to the token bill. As someone who builds this way daily, this is the right read of where tooling is going — design the library so the agent and the human both move fast.
Where it's rough (it's a beta, after all)
Be clear-eyed. This is early:
- APIs aren't stable. Interfaces will change before GA. Build accordingly.
- Settings menus are still in progress.
- Ads support lands later in 2026 — they flagged it as genuinely complicated.
- Accessibility and captions work, and it already plays many formats and streaming services. But the baseline for this beta is "simple website playback," not "replace your entire v8 production stack."
Release timeline
- GA target: mid-2026.
- Before GA: feature parity with current Plyr, Vidstack, and Media Chrome; migration guides for v8, Plyr, Vidstack, and Media Chrome; more presets.
- Ads: later in 2026.
What to do now
If you're starting something new — a side project, a landing page with a hero video, a fresh React app — pull v10 beta and feel the difference. A sub-5 kB player is genuinely fun to work with, and the composable model is how a player should have worked all along.
If you're running v8 in production, sit tight. Wait for the official migration guides. Don't rewrite a working player against unstable APIs just to chase a smaller bundle this quarter.
Either way, go kick the tires at videojs.org, drop feedback in their GitHub issues or Discord, and tell them where it falls short. A rewrite this ambitious gets good through real usage — and right now, that's us.
Frequently asked questions
What is Video.js v10?
Video.js v10 is a complete ground-up rewrite of the open-source JavaScript video player, built collaboratively by the teams behind Video.js, Plyr, Vidstack, and Media Chrome. It cuts the default bundle by roughly 88% versus v8, splits the player into composable State, UI, and Media components, and treats React and Web Components as first-class targets. It's currently in beta with a general availability target of mid-2026.
How much smaller is Video.js v10 compared to v8?
The default player bundle is about 88% smaller than v8.x.x, or 66% smaller when comparing similar configurations with adaptive bitrate removed. A simple React "hello world" player ships under 5 kB gzipped, the standard HTML video player is around 25 kB gzipped versus 75 kB for v8 core, and an SPF-composed HLS engine runs at roughly 19% of v8's size with ABR.
Should I migrate my production Video.js v8 app to v10 now?
Not yet. The v10 team explicitly recommends that production v8 users wait for official migration guides, which are planned before general availability in mid-2026. The beta is suitable for new projects, experimentation, and simple website playback, but APIs are still unstable and some features like settings menus and ads support are incomplete.
Does Video.js v10 support React?
Yes. React is a first-class target in v10, alongside HTML Web Components. You create a player with createPlayer from @videojs/react, compose features and skins, and render it like any other component. TypeScript and Tailwind support are included out of the box, and UI primitives are unstyled composable parts inspired by Base UI and Radix.
When will Video.js v10 be stable?
The general availability target is mid-2026. Before GA, the team plans to ship feature parity with the previous Plyr, Vidstack, and Media Chrome versions, migration guides for all four projects, and additional player presets. Ads support is expected later in 2026 because of its complexity.
Building something with the new player? I write about frontend architecture, React, and shipping fast on the blog — come trade notes.
