# Video.js v10 — HTML Guides

> Installation, migration, concepts, playback guides, customization, and tooling for Video.js. Bundled with `@videojs/html` v10.0.0-rc.3. Links are relative paths to files in this directory.

## Getting Started

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

- [HTML Installation Guide](./installation.md): Install Video.js with HTML custom elements and build an accessible, customizable video player
- [Vue Installation Guide](./installation-vue.md): Install Video.js in Vue or Nuxt and build a video player with HTML custom elements
- [Svelte Installation Guide](./installation-svelte.md): Install Video.js in Svelte or SvelteKit and build a video player with HTML custom elements
- [Shadcn Installation Guide](./installation-shadcn.md): Add editable React or HTML skin source with the Shadcn registry
- [CDN Installation Guide](./installation-cdn.md): Load Video.js from jsDelivr and build an HTML video player without installing Video.js packages
- [Build your own UI component](./build-your-own-component.md): Create custom player controls that read state, dispatch actions, and stay accessible.
- [Architecture](./architecture.md): How Video.js players are structured — state, UI, media, and extensions
- [Customize skins](./customize-skins.md): Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions
- [Why Video.js?](./why-videojs.md): The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.
- [Browser support](./browser-support.md): Browsers and rendering environments supported by Video.js 10, and what the stylesheets need from them
- [Build with AI](./build-with-ai.md): Install the Video.js skill and give AI coding agents version-matched docs for building and migrating players
- [v10 Roadmap](./v10-roadmap.md): Timeline and milestones for Video.js v10 rebuild and the future of v8
- [Contribute to Video.js](https://github.com/videojs/v10/blob/main/CONTRIBUTING.md)

## Frameworks

Guides for using the HTML version of Video.js with Vue, Nuxt, Svelte, or SvelteKit.

- [Vue](./vue.md): Add Video.js to a Vue or Nuxt app
- [Svelte](./svelte.md): Add Video.js to a Svelte or SvelteKit app

## Environment

TypeScript, bundlers, the CDN, self-hosting, and Content Security Policy.

- [TypeScript](./typescript.md): TypeScript version and module resolution requirements for Video.js packages
- [Bundlers](./bundlers.md): Bundler requirements for Video.js package exports, CSS, and wrapper libraries
- [CDN](./cdn.md): Understand the browser-ready bundles, stylesheets, and URL layout published by the Video.js CDN
- [Self-host the player](./self-hosting.md): Serve the Video.js HTML player from your own origin for offline, air-gapped, or restricted-network deployments
- [Content Security Policy](./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](./features.md): The state and actions each feature adds to the player
- [Skins](./skins.md): Packaged player designs that include both UI components and their styles.
- [Presets](./presets.md): Pre-packaged player configurations that bundle state management, skins, and media elements for specific use cases.
- [UI components](./ui-components.md): How Video.js UI components use focused elements, data attributes for state, and compound composition.
- [Accessibility](./accessibility.md): How Video.js approaches accessibility, and what you should consider if you're deeply customizing your player
- [Media sources](./media-sources.md): Set what a media element 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](./autoplay.md): Start playback automatically and handle browser autoplay restrictions.
- [Automatically show and hide controls](./controls.md): Show controls while the user is active, hide them during playback, and toggle them by touch.
- [Add a poster and loading placeholder](./poster.md): Set the image shown before playback, then add a lightweight placeholder while it loads
- [Show captions and subtitles](./captions.md): Show captions and subtitles, and let users turn them on and pick a language.
- [Add keyboard shortcuts and gestures](./keyboard-shortcuts.md): Add keyboard shortcuts, tap and double-tap gestures, and on-screen feedback for input actions.
- [Play live streams](./live-streams.md): Play live streams with live-edge tracking, DVR windows, and stream-type detection.
- [Add a quality selector](./quality.md): Read available renditions, let the engine adapt automatically, and offer manual quality selection.
- [Go fullscreen and lock orientation](./fullscreen.md): Present the player fullscreen with custom controls intact, and lock screen orientation on mobile.
- [Use picture-in-picture](./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](./thumbnails.md): Preview frames along the timeline while the user scrubs, powered by a storyboard track.
- [Cast to AirPlay and Chromecast](./casting.md): Send playback to AirPlay and Google Cast devices, with availability detection and connection state.
- [Handle playback errors](./playback-errors.md): Display playback failures, report them, and choose a useful recovery action.
- [Remember user preferences](./user-preferences.md): Persist volume, caption, and quality preferences across sessions by subscribing to player state.
- [Add a background video](./background-video.md): Add an accessible background video from an MP4, WebM, HLS, or Mux source
- [Internationalize the player](./internationalization.md): Translate player labels and announcements: shipped locale packs, custom translations, runtime switching, and server rendering.
- [Monitor playback with Mux Data](./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 from Video.js 8](./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](./migrate-from-mux-player.md): Move a Mux Player embed to Video.js v10, splitting one element into a player, a media, and a skin
- [Migrate from Plyr](./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](./migrate-from-media-chrome.md): Map Media Chrome's controller, elements, and attributes onto Video.js v10, where most of the work is renaming and reshaping rather than rewriting