Skip to content
Breaking changes

v10.0.0-rc.1

Compare changes on GitHub

Video.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/media or @videojs/media/dom as appropriate.
  • Google Cast and Mux Data use extension paths (#2577). Change @videojs/react/media/google-cast to @videojs/react/extensions/google-cast, and make the equivalent mediaextensions change for Mux Data, HTML, and CDN imports.
  • Extension APIs use the Extension name (#2600, #2601). Rename MuxDataMuxDataExtension, GoogleCastGoogleCastExtension, MediaComponentMediaExtension, and useMediaComponentuseMediaExtension; move standalone default-prop objects to each class’s defaultProps.
  • Playback classes are now adapters (#2602). Rename classes and props such as HlsJsMediaHlsJsAdapter and HlsJsMediaPropsHlsJsAdapterProps, use class defaultProps instead of *MediaDefaultProps, and update extension calls from setMedia to setAdapter.
  • Browser bundles moved to @videojs/cdn (#2598). Replace @videojs/html@<version>/cdn/... URLs with @videojs/cdn@<version>/...; media and extensions remain under their media/ and extensions/ 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).