Web Development

Video.js v10 Beta: The 88% Smaller Rewrite Built for AI Agents

The web's most popular open-source video player just underwent a transformation that seems almost impossible: an 88% reduction in bundle size. Video.js v10, now in beta, isn't just an incremental update — it's a complete ground-up rewrite that reimagines what a web video player should be in the AI era.

Why Video.js v10 Is a Big Deal

Video.js powers tens of billions of video plays every month across the web. With over 75,000 GitHub stars, it's the default choice for developers who need reliable, customizable video playback. But v8 had grown complex and heavy, accumulating features that many users didn't need while dragging down page load times.

Version 10 represents a rare collaboration between competing projects. The Video.js team joined forces with developers from Plyr, Vidstack, and Media Chrome — four major video player libraries — to create something none could build alone. The result is a player architected for modern web development, where bundle size directly impacts Core Web Vitals and AI agents increasingly handle coding tasks.

88% Smaller Bundles, Real Performance Gains

The numbers are striking. The default v10 bundle is 88% smaller than v8.x when excluding adaptive bitrate streaming. Even when you need ABR features, v10 is 66% smaller than its predecessor. For a simple HLS use case using the new SPF engine, you're looking at just 19% of the file size compared to v8 with ABR.

For React developers, the gains are even more dramatic. A "hello world" video player with a play button clocks in at under 5 kB gzipped. To put that in perspective, many websites have favicons larger than that. This isn't just about bragging rights — smaller bundles mean faster page loads, better SEO rankings, and improved conversion rates.

SPF: A New Streaming Architecture

The secret behind these size reductions is SPF, the Streaming Processor Framework. Unlike the monolithic architecture of previous versions, SPF is composable and functional — you include only what you actually need. Don't need DRM? It's not in your bundle. No ads? Leave them out. Live streaming not required? Exclude it.

The simple HLS engine demonstrates what's possible: at just 12.1 kB gzipped, it's 12% the size of HLS.js-light (which weighs in at 103.4 kB). This isn't just a marginal improvement — it's an order of magnitude reduction. For video-heavy websites, this translates to measurable improvements in Time to First Contentful Paint and overall user experience.

Built for AI-Augmented Development

Video.js v10 is the first major video player explicitly designed for the AI coding era. The documentation includes an llms.txt file specifically formatted to give AI agents better context about the library. Documentation is available in Markdown format that agents can request directly.

More importantly, the components are less abstracted and more directly usable. Previous versions of Video.js wrapped HTML5 video elements in multiple layers of abstraction that confused AI tools. v10's architecture is flatter and more explicit, meaning agents can actually understand and modify the code without getting lost in inheritance chains.

Framework-Native Design

React gets first-class treatment in v10 with dedicated hooks and providers that feel native to the ecosystem. TypeScript definitions are built-in, not bolted-on. The styling uses Tailwind CSS conventions, making it familiar to modern frontend developers.

For those who prefer vanilla HTML, Web Components provide the same functionality without framework lock-in. The unstyled UI primitives follow the pattern popularized by Radix and Base UI — flexible, accessible building blocks that you style to match your brand.

New Preset System for Common Use Cases

Not every video player needs the same features. v10 introduces purpose-built presets for specific scenarios:

Default video preset: General website video with standard controls
Audio preset: Optimized for podcast and music players
Background video: Landing page videos that autoplay silently — just 6.9 kB gzipped for the HTML implementation

This preset approach means you're not shipping code for features you'll never use, keeping bundles lean and performance optimal.

FAQ

Is Video.js v10 backward compatible with v8?

No — and that's intentional. This is a complete architectural rewrite, not an incremental update. The API has changed significantly, and migration will require code changes. The team provides migration guides, but this isn't a drop-in replacement.

When will v10 reach stable release?

v10 is currently in beta. The exact stable release date depends on community feedback and testing. The beta is production-ready for evaluation, but the team recommends thorough testing before deploying to critical production environments.

Should I migrate from my current video player?

For new projects, v10 is worth serious consideration given the performance benefits. For existing Video.js v8 installations, migration makes sense if bundle size is impacting your Core Web Vitals or if you're starting a major redesign. The 88% size reduction can meaningfully improve page load times and SEO rankings.

Does v10 support DRM and advertisements?

Yes, but these are opt-in features rather than defaults. The SPF architecture means you add only the components you need. DRM support, advertising integrations, and advanced analytics are available as extensions rather than core bundle inclusions.

Is the AI agent support just marketing?

The llms.txt and Markdown documentation are real features designed based on feedback from developers using AI coding tools. The less-abstracted component architecture is a genuine technical decision that makes the library more comprehensible to both humans and AI agents. Whether this matters to your workflow depends on how heavily you use AI coding assistants.