# Video.js 10 rebuilds the web video player — and migration is not a package upgrade

Video.js 10 is generally available after a ground-up rebuild combining ideas from five players. It adds React and Web Component integrations, editable Shadcn skins and a new package family, while v8 remains on the old video.js npm package.

Video.js 10 is a new player architecture, not a drop-in v8 upgrade: review new package names, compatibility, streaming limits and migration guides.

- Status: Active
- Published: 2026-10-12T06:08:32+13:00
- Updated: 2026-10-12T06:08:32+13:00
- Categories: Web Development, JavaScript, Frameworks
- Tags: React, Shadcn, Video.js, Web Components, web video
- Canonical HTML: https://beyondthe.news/dossiers/videojs-10-ga-react-web-components-shadcn-migration

## What changed

On October 1, 2026, Video.js 10.0.0 reached general availability. It rebuilds the player as separate state, media and UI components, drawing on Video.js, Plyr, Vidstack, Media Chrome and Mux Player. The release offers React components and vanilla HTML Web Components, customisable skins via Shadcn CLI, and an official coding-agent skill. New v10 packages are @videojs/react and @videojs/html; the older video.js npm package remains on v8. The project reports about 60% smaller default bundles than v8 under its RC comparison, while noting its SPF streaming engine does not yet support advertising or true low-latency live streaming.

## Why it matters

A widely used web-video player has changed its integration contract. Teams upgrading need to translate legacy API usage and assess streaming features, browser support and skin ownership. For new apps, composable components can reduce shipped code and allow UI changes without forking player internals.

## One architecture across several player ecosystems

The project integrates lessons and contributors from five player families and separates UI controls from the media renderer. React and standard Web Component paths have dedicated documentation.

## Not a drop-in upgrade

v10 lives in @videojs/react and @videojs/html, while video.js on npm remains v8. Legacy APIs need deliberate migration and integration tests; a simple dependency bump will not perform the rewrite.

## New UI and agent integration

The Shadcn CLI can copy player skin source into an application for direct editing. A project-maintained coding-agent skill documents v10 APIs, but does not eliminate migration testing.

## Streaming caveats

The new SPF composition engine does not yet support ads or true low-latency live. The project suggests HlsJsVideo for these use cases. A Compat skin extends Safari support back to version 16.

## Key details

- GA announced October 1, 2026.
- v10 packages are @videojs/react and @videojs/html; video.js remains v8.
- Project claims ~60% smaller default bundle in its RC comparison.
- SPF lacks ad and true low-latency live support at GA.
- Shadcn-editable skins and an official coding-agent skill.

## Builder takeaways

- Do not update the old video.js package expecting v10 APIs.
- Inventory player plugins, DRM, ads, HLS and low-latency needs before migrating.
- Use the official migration guide and test Safari 16 and target devices.
- Treat vendor bundle comparisons as a starting point, not a promise.

## What to watch

- SPF advertising and low-latency support.
- Compatibility and migration experiences across legacy v8 plugins.

## Uncertainties

- Bundle reductions vary by selected modules and streaming path.
- Some legacy plugin ecosystems may require adapters or replacement.

## Sources

- [Video.js v10 GA announcement](https://videojs.org/blog/videojs-10) — Video.js · primary release · 2026-10-01T00:00:00+13:00. Release scope, package names, limitations and benchmark framing.
- [Video.js v10 migration guide](https://videojs.org/docs/framework/react/guides/migrate) — Video.js · primary release · 2026-10-01T00:00:00+13:00. Migration requirements and React integration.
- [Frontend Focus issue 761](https://frontendfoc.us/issues/761) — Frontend Focus · specialist coverage · 2026-10-07T00:00:00+13:00. Independent specialist coverage of planned migration.