# Video.js v10 — React Guides

> Installation, migration, concepts, playback guides, customization, and tooling for Video.js. Every page below is also available as Markdown at its `.md` URL. This section in one file (about 131k tokens): https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/llms-full.txt

## Getting Started

Install Video.js, customize a skin, understand its main pieces, check browser and AI tool support, and contribute.

- [React Installation Guide](https://deploy-preview-9398--vjs10-site.netlify.app/docs/guides/installation/react.md): Install Video.js in React and build an accessible, customizable video player with composable controls
- [Shadcn Installation Guide](https://deploy-preview-9398--vjs10-site.netlify.app/docs/guides/installation/shadcn.md): Add editable React or HTML skin source with the Shadcn registry
- [Build your own UI component](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/build-your-own-component.md): Create custom player controls that read state, dispatch actions, and stay accessible.
- [Architecture](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/architecture.md): How Video.js players are structured — state, UI, media, and extensions
- [Customize skins](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/customize-skins.md): Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions
- [Why Video.js?](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/why-videojs.md): The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.
- [Browser support](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/browser-support.md): Browsers and rendering environments supported by Video.js 10, and how the packaged skins reach them
- [Build with AI](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/build-with-ai.md): Install the Video.js skill and give AI coding agents version-matched docs for building and migrating players
- [v10 Roadmap](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/v10-roadmap.md): Where Video.js v10 stands, what comes after 10.0, and the support plan for Video.js 8
- [Contribute to Video.js](https://github.com/videojs/video.js/blob/main/CONTRIBUTING.md)

## Environment

TypeScript, bundlers, and Content Security Policy.

- [TypeScript](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/typescript.md): TypeScript version and module resolution requirements for Video.js packages
- [Bundlers](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/bundlers.md): Bundler requirements for Video.js package exports, CSS, and wrapper libraries
- [Content Security Policy](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/content-security-policy.md): Allow the media, images, workers, and styles a Video.js player needs when your page enforces a Content Security Policy

## Concepts

Understanding-oriented pages that explain how and why things work. Read these to build a mental model of the library.

- [Features](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/features.md): The state and actions each feature adds to the player
- [Skins](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/skins.md): Packaged player designs that include both UI components and their styles.
- [Presets](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/presets.md): Pre-packaged player configurations that bundle state management, skins, and media components for specific use cases.
- [UI components](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/ui-components.md): How Video.js UI components use focused elements, data attributes for state, and compound composition.
- [Accessibility](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/accessibility.md): How Video.js approaches accessibility, and what you should consider if you're deeply customizing your player
- [Media sources](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/media-sources.md): Set what a media component plays and how its engine plays it with the structured source property

## Playback

Guides for one player capability each: the recommended setup, how it works, browser constraints, variations, and troubleshooting.

- [Autoplay](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/autoplay.md): Start playback automatically and handle browser autoplay restrictions.
- [Automatically show and hide controls](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/controls.md): Show controls while the user is active, hide them during playback, and toggle them by touch.
- [Add a poster and loading placeholder](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/poster.md): Set the image shown before playback, then add a lightweight placeholder while it loads
- [Show captions and subtitles](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/captions.md): Show captions and subtitles, and let users turn them on and pick a language.
- [Add keyboard shortcuts and gestures](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/keyboard-shortcuts.md): Add keyboard shortcuts, tap and double-tap gestures, and on-screen feedback for input actions.
- [Play live streams](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/live-streams.md): Play live streams with live-edge tracking, DVR windows, and stream-type detection.
- [Add a quality selector](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/quality.md): Read available renditions, let the engine adapt automatically, and offer manual quality selection.
- [Go fullscreen and lock orientation](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/fullscreen.md): Present the player fullscreen with custom controls intact, and lock screen orientation on mobile.
- [Use picture-in-picture](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/picture-in-picture.md): Pop the video into a floating window, with availability detection and state that tracks every entry path.
- [Show timeline thumbnail previews](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/thumbnails.md): Preview frames along the timeline while the user scrubs, powered by a storyboard track.
- [Cast to AirPlay and Chromecast](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/casting.md): Send playback to AirPlay and Google Cast devices, with availability detection and connection state.
- [Handle playback errors](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/playback-errors.md): Display playback failures, report them, and choose a useful recovery action.
- [Remember user preferences](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/user-preferences.md): Save volume and caption preferences, restore them after loading, and adapt the pattern for quality selection.
- [Add a background video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/background-video.md): Add an accessible background video from an MP4, WebM, HLS, or Mux source
- [Internationalize the player](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/internationalization.md): Translate player labels and announcements: shipped locale packs, custom translations, runtime switching, and server rendering.
- [Monitor playback with Mux Data](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/mux-data.md): Measure startup time, rebuffering, failures, and watch time by adding the Mux Data extension to a player

## Migrate

Guides for moving an existing player integration to Video.js v10, one per player you might be coming from.

- [Migrate to Video.js v10](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/migrate.md): Understand how Video.js v10 differs from the players it brings together, and choose the migration guide for the player you use today.
- [Migrate from Video.js 8](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/migrate-from-video-js-8.md): Move a Video.js 8 integration to v10, mapping the options object, techs, plugins, and player API onto composed components
- [Migrate from Mux Player](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/migrate-from-mux-player.md): Move a Mux Player embed to Video.js v10 using a player, media component, skin, and analytics extension
- [Migrate from Plyr](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/migrate-from-plyr.md): Move an existing Plyr integration to Video.js v10, mapping Plyr options and its instance API onto components and player state
- [Migrate from Media Chrome](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/migrate-from-media-chrome.md): Move a Media Chrome player to Video.js v10, mapping its controller, controls, styles, and imperative calls
- [Migrate from Vidstack](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/migrate-from-vidstack.md): Move a Vidstack Player integration to Video.js 10, mapping the player, providers, layouts, and media store onto composed components
- [Migrate from Video-React](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/guides/migrate-from-video-react.md): Move a Video-React integration to Video.js 10, mapping the Player component, control bar children, player ref, and Redux state onto composed components and hooks

---

React documentation: https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/llms.txt
All documentation: https://deploy-preview-9398--vjs10-site.netlify.app/llms.txt