v10.0.0-rc.1
Compare changes on GitHubVideo.js 10 reaches its first release candidate with a new Wistia player, installable generated skins, and a cleaner split between playback integrations, extensions, and CDN bundles.
Breaking changes
- Playback integrations are standalone packages (#2567). Install the adapter alongside your framework package, such as
pnpm add @videojs/react @videojs/mux-video; framework façade imports remain the same. Replace removed@videojs/media/dom/*imports with@videojs/mediaor@videojs/media/domas appropriate. - Google Cast and Mux Data use extension paths (#2577). Change
@videojs/react/media/google-castto@videojs/react/extensions/google-cast, and make the equivalentmedia→extensionschange for Mux Data, HTML, and CDN imports. - Extension APIs use the
Extensionname (#2600, #2601). RenameMuxData→MuxDataExtension,GoogleCast→GoogleCastExtension,MediaComponent→MediaExtension, anduseMediaComponent→useMediaExtension; move standalone default-prop objects to each class’sdefaultProps. - Playback classes are now adapters (#2602). Rename classes and props such as
HlsJsMedia→HlsJsAdapterandHlsJsMediaProps→HlsJsAdapterProps, use classdefaultPropsinstead of*MediaDefaultProps, and update extension calls fromsetMediatosetAdapter. - Browser bundles moved to
@videojs/cdn(#2598). Replace@videojs/html@<version>/cdn/...URLs with@videojs/cdn@<version>/...; media and extensions remain under theirmedia/andextensions/paths.
More ways to play
Wistia is now a first-class media option. Use <wistia-video> in HTML or <WistiaVideo> in React, pass a Wistia URL or hashed ID as src, and send Wistia-specific options through source (#2305). Read the reference for HTML and React.
The CDN is now its own package, with browser-ready bundles and stylesheets in one place (breaking, above). The new published stylesheets let you style a player before its custom elements upgrade, and are covered in the CDN documentation (#2340).
Skins you can take with you
Default and Minimal skins now come from one VJSC source, so the HTML, React, CSS, and Tailwind variants share the same component and styling model (#2479, #2527, #2545, #2546). Menu state follows options across nested targets, which keeps controls consistent as available choices change (#2528).
You can now install and edit those skins through the hosted Shadcn registry instead of copying generated scripts (#2544, #2547, #2615). Start with Customize skins for HTML or Customize skins for React. Follow-up work aligned generated skins across frameworks and styling modes, including popovers, menus, tooltips, dialogs, sliders, and player feedback (#2530, #2576, #2580).
Player polish
Error dialogs now stay inside their player, preserving the rest of the page, and handle narrow layouts without hiding the dismissal control (#2449, #2451). Posters with no source no longer draw broken-image chrome (#2453), and seek thumbnails fill their preview box (#2517).
Keyboard and pointer interactions are steadier too: fullscreen keeps working after a pointer activation followed by Space, a focused slider owns its arrow keys and keeps controls visible while pressed, invalid gesture types no longer fall back to tap, and holding a volume key at its limit no longer repeats feedback (#2472, #2473, #2474, #2475, #2505). The hls.js AirPlay bridge also respects an author-supplied disableRemotePlayback preference (#1889).
Playback reliability
The SPF engine now retains the configured preload value on attach, can check codec support through ManagedMediaSource where classic MSE is unavailable, and avoids a waiting state that never clears (#2534, #2564, #2574). Mux Data also keeps one view for each viewing across repeated loadstart events (#2565).