Video.js v10: A Modular Rewrite Merging Four Major Players

The Convergence of Open-Source Video

Video.js v10 marks a significant shift in the web video ecosystem by merging four previously competing projects—Video.js, Plyr, Vidstack, and Media Chrome—into a single, unified codebase. Led by original Video.js creator Steve Heffernan, the project aims to replace the legacy, monolithic architecture with a modular, component-driven system. The new version is built on top of Media Chrome, utilizing a three-layer architecture that separates media handling, state management, and UI components. This design allows developers to import only the specific features required for their use case, significantly reducing bundle sizes compared to the previous version that shipped with adaptive streaming and all features bundled by default.

Technical Architecture and Performance

The primary technical improvement is the transition to a modular, unstyled-by-default component library. Developers can now treat video controls as standard elements, enabling easier styling with CSS or Tailwind without fighting legacy overrides. The library is written in TypeScript and provides first-class support for React, with all components fully typed. The project also includes machine-readable documentation and pre-built skills specifically designed to assist AI coding agents in generating functional player implementations.

• Bundle Size Reduction: The default player size is approximately 25 KB compressed, representing an 88% reduction from the previous version's default bundle.
• Modular Imports: Developers assemble players by importing only necessary modules, with minimal React player configurations landing under 5 KB.
• Architecture Layers: The system is split into three distinct layers: the media engine, the state store, and the UI layer, allowing for independent swapping of components.
• AI Integration: The repository includes a machine-readable documentation file and pre-built skills to ensure AI coding assistants can generate accurate implementation code.

Implementation Status

The project is currently in beta, with a stable release targeted for mid-year and full feature parity with the legacy Video.js expected by the end of the year. While the new architecture is highly performant and developer-friendly, the API remains in flux, and heavy-duty production features are still being ported from the legacy codebase. For new projects or those frustrated by the styling limitations of traditional players, v10 offers a modern alternative, though legacy production sites should remain on the stable v8/v9 versions for the time being.