@videojs/html 10.0.0-rc.1 → 10.0.0-rc.3

package/docs/llms.txt

@@ -1,221 +1,293 @@
-# Video.js v10 — Html Documentation
+# Video.js v10 — HTML Documentation
 
-## Start here
+> Bundled with `@videojs/html` v10.0.0-rc.3. Links are relative paths to files in this directory.
 
-Install Video.js, understand its main pieces, or move an existing player to Video.js 10.
+> Install the [Video.js skill](https://github.com/videojs/skills) to help AI coding agents find version-matched pages from this index.
 
-- [Installation](./how-to/installation.md): Install Video.js and build your first player with streaming support and accessible controls
-- [Overview](./concepts/overview.md): How Video.js players are structured — state, UI, media, and extensions
-- [Why Video.js?](./concepts/why-videojs.md): The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.
-- [v10 Roadmap](./concepts/v10-roadmap.md): Timeline and milestones for Video.js v10 rebuild and the future of v8
-### Migrate to Video.js 10
+> The `video.js` package on npm is still Video.js 8. Video.js 10 ships as `@videojs/html`; to move existing Video.js 8 code, read https://videojs.org/docs/framework/html/guides/migrate-from-video-js-8.md
 
-Guides for moving an existing player integration to Video.js v10, one per player you might be coming from.
+> Print version-matched installation options without changing files: `npx @videojs/cli agents init`, then pass `--framework html` with the other choices. Installation guide index: https://videojs.org/docs/guides/installation.md
 
-- [Migrate from Video.js 8](./how-to/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](./how-to/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](./how-to/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](./how-to/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
+## Guides
 
-## Tooling
+Installation, migration, concepts, playback guides, customization, and tooling for Video.js.
 
-Guidance for AI tools, browser support, TypeScript, bundlers, and loading Video.js from a CDN.
+Section index: [guides/llms.txt](./guides/llms.txt).
 
-- [Build with AI](./how-to/build-with-ai.md): How to give AI tools the context they need to build Video.js players alongside you
-- [Browser support](./concepts/browser-support.md): Browsers and rendering environments supported by Video.js 10
-- [TypeScript](./concepts/typescript.md): TypeScript version and module resolution requirements for Video.js packages
-- [Bundlers](./concepts/bundlers.md): Bundler requirements for Video.js package exports, CSS, and wrapper libraries
-- [CDN](./concepts/cdn.md): The files the Video.js CDN serves and the layout rules behind their URLs
+### Getting Started
 
-## Concepts
+Install Video.js, customize a skin, understand its main pieces, check browser and AI tool support, and contribute.
 
-Understanding-oriented pages that explain how and why things work. Read these to build a mental model of the library.
+- [HTML Installation Guide](./guides/installation.md): Install Video.js with HTML custom elements and build an accessible, customizable video player
+- [Vue Installation Guide](./guides/installation-vue.md): Install Video.js in Vue or Nuxt and build a video player with HTML custom elements
+- [Svelte Installation Guide](./guides/installation-svelte.md): Install Video.js in Svelte or SvelteKit and build a video player with HTML custom elements
+- [Shadcn Installation Guide](./guides/installation-shadcn.md): Add editable React or HTML skin source with the Shadcn registry
+- [CDN Installation Guide](./guides/installation-cdn.md): Load Video.js from jsDelivr and build an HTML video player without installing Video.js packages
+- [Build your own UI component](./guides/build-your-own-component.md): Create custom player controls that read state, dispatch actions, and stay accessible.
+- [Architecture](./guides/architecture.md): How Video.js players are structured — state, UI, media, and extensions
+- [Customize skins](./guides/customize-skins.md): Style a packaged Video.js skin or add its source to change controls, layout, styles, and interactions
+- [Why Video.js?](./guides/why-videojs.md): The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming.
+- [Browser support](./guides/browser-support.md): Browsers and rendering environments supported by Video.js 10, and what the stylesheets need from them
+- [Build with AI](./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](./guides/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)
 
-- [Features](./concepts/features.md): The state and actions each feature adds to the player
-- [Skins](./concepts/skins.md): Packaged player designs that include both UI components and their styles.
-- [Presets](./concepts/presets.md): Pre-packaged player configurations that bundle state management, skins, and media elements for specific use cases.
-- [UI components](./concepts/ui-components.md): How Video.js UI components use focused elements, data attributes for state, and compound composition.
-- [Accessibility](./concepts/accessibility.md): How Video.js approaches accessibility, and what you should consider if you're deeply customizing your player
-- [Media sources](./concepts/media-sources.md): Set what a media element plays and how its engine plays it with the structured source property
-- [Mux Data](./concepts/mux-data.md): Monitor playback quality and viewer experience by adding the Mux Data extension to a player
-- [Security](./concepts/security.md): How to configure Content Security Policy for your video player
-- [Custom element lifecycle](./concepts/custom-element-lifecycle.md): Choose the right Video.js HTML base class and clean up custom elements when they leave the page.
+### Frameworks
 
-## How to
+Guides for using the HTML version of Video.js with Vue, Nuxt, Svelte, or SvelteKit.
 
-Task-oriented guides that each answer one goal in the reader's words. Some cover custom player UI; others configure a preset, skin, media component, or extension. Guides lead with the recommended path, then the constraints and variations needed to apply it.
+- [Vue](./guides/vue.md): Add Video.js to a Vue or Nuxt app
+- [Svelte](./guides/svelte.md): Add Video.js to a Svelte or SvelteKit app
 
-- [Customize skins](./how-to/customize-skins.md): Style a packaged Video.js skin or copy its source to change controls, layout, styles, and interactions
-- [Build your own UI component](./how-to/build-your-own-component.md): Create custom player controls that read state, dispatch actions, and stay accessible.
-- [Add a poster and loading placeholder](./how-to/add-a-poster-and-loading-placeholder.md): Set the image shown before playback, then add a lightweight placeholder while it loads
-### Integrate with a framework
+### Environment
 
-Guides for using the HTML version of Video.js with Vue, Nuxt, Svelte, or SvelteKit.
+TypeScript, bundlers, the CDN, self-hosting, and Content Security Policy.
+
+- [TypeScript](./guides/typescript.md): TypeScript version and module resolution requirements for Video.js packages
+- [Bundlers](./guides/bundlers.md): Bundler requirements for Video.js package exports, CSS, and wrapper libraries
+- [CDN](./guides/cdn.md): Understand the browser-ready bundles, stylesheets, and URL layout published by the Video.js CDN
+- [Self-host the player](./guides/self-hosting.md): Serve the Video.js HTML player from your own origin for offline, air-gapped, or restricted-network deployments
+- [Content Security Policy](./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](./guides/features.md): The state and actions each feature adds to the player
+- [Skins](./guides/skins.md): Packaged player designs that include both UI components and their styles.
+- [Presets](./guides/presets.md): Pre-packaged player configurations that bundle state management, skins, and media elements for specific use cases.
+- [UI components](./guides/ui-components.md): How Video.js UI components use focused elements, data attributes for state, and compound composition.
+- [Accessibility](./guides/accessibility.md): How Video.js approaches accessibility, and what you should consider if you're deeply customizing your player
+- [Media sources](./guides/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](./guides/autoplay.md): Start playback automatically and handle browser autoplay restrictions.
+- [Automatically show and hide controls](./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](./guides/poster.md): Set the image shown before playback, then add a lightweight placeholder while it loads
+- [Show captions and subtitles](./guides/captions.md): Show captions and subtitles, and let users turn them on and pick a language.
+- [Add keyboard shortcuts and gestures](./guides/keyboard-shortcuts.md): Add keyboard shortcuts, tap and double-tap gestures, and on-screen feedback for input actions.
+- [Play live streams](./guides/live-streams.md): Play live streams with live-edge tracking, DVR windows, and stream-type detection.
+- [Add a quality selector](./guides/quality.md): Read available renditions, let the engine adapt automatically, and offer manual quality selection.
+- [Go fullscreen and lock orientation](./guides/fullscreen.md): Present the player fullscreen with custom controls intact, and lock screen orientation on mobile.
+- [Use picture-in-picture](./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](./guides/thumbnails.md): Preview frames along the timeline while the user scrubs, powered by a storyboard track.
+- [Cast to AirPlay and Chromecast](./guides/casting.md): Send playback to AirPlay and Google Cast devices, with availability detection and connection state.
+- [Handle playback errors](./guides/playback-errors.md): Display playback failures, report them, and choose a useful recovery action.
+- [Remember user preferences](./guides/user-preferences.md): Persist volume, caption, and quality preferences across sessions by subscribing to player state.
+- [Add a background video](./guides/background-video.md): Add an accessible background video from an MP4, WebM, HLS, or Mux source
+- [Internationalize the player](./guides/internationalization.md): Translate player labels and announcements: shipped locale packs, custom translations, runtime switching, and server rendering.
+- [Monitor playback with Mux Data](./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.
 
-- [Use Video.js with Vue and Nuxt](./how-to/use-videojs-with-vue.md): Add Video.js to a Vue or Nuxt app
-- [Use Video.js with Svelte and SvelteKit](./how-to/use-videojs-with-svelte.md): Add Video.js to a Svelte or SvelteKit app
-
-- [Autoplay](./how-to/autoplay.md): Start playback automatically and handle browser autoplay restrictions.
-- [Automatically show and hide controls](./how-to/show-and-hide-controls.md): Show controls while the user is active, hide them during playback, and toggle them by touch.
-- [Show captions and subtitles](./how-to/show-captions-and-subtitles.md): Show captions and subtitles, and let users turn them on and pick a language.
-- [Add keyboard shortcuts and gestures](./how-to/add-keyboard-shortcuts-and-gestures.md): Add keyboard shortcuts, tap and double-tap gestures, and on-screen feedback for input actions.
-- [Play live streams](./how-to/play-live-streams.md): Play live streams with live-edge tracking, DVR windows, and stream-type detection.
-- [Add a quality selector](./how-to/add-quality-selector.md): Read available renditions, let the engine adapt automatically, and offer manual quality selection.
-- [Go fullscreen and lock orientation](./how-to/go-fullscreen-and-lock-orientation.md): Present the player fullscreen with custom controls intact, and lock screen orientation on mobile.
-- [Use picture-in-picture](./how-to/use-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](./how-to/show-timeline-thumbnail-previews.md): Preview frames along the timeline while the user scrubs, powered by a storyboard track.
-- [Cast to AirPlay and Chromecast](./how-to/cast-to-airplay-and-chromecast.md): Send playback to AirPlay and Google Cast devices, with availability detection and connection state.
-- [Handle playback errors](./how-to/handle-playback-errors.md): Surface terminal playback errors and give users a useful next step.
-- [Remember user preferences](./how-to/remember-user-preferences.md): Persist volume, caption, and quality preferences across sessions by subscribing to player state.
-- [Add a background video](./how-to/add-a-background-video.md): Add an accessible background video from an MP4, WebM, HLS, or Mux source
-- [Internationalize the player](./how-to/internationalize-the-player.md): Translate player labels and announcements: shipped locale packs, custom translations, runtime switching, and server rendering.
-- [Self-host the player](./how-to/self-host-the-player.md): Serve the Video.js HTML player from your own origin for offline, air-gapped, or restricted-network deployments
+- [Migrate from Video.js 8](./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](./guides/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](./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](./guides/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
 
 ## Components
 
-API reference for skins, interface components, media components, and service integrations.
+API reference for skins, media components, extensions, and interface components.
+
+Section index: [reference/components/llms.txt](./reference/components/llms.txt).
+
+### Layout
+
+API reference for the components that establish a player and lay out its interface.
+
+- [video-player](./reference/components/player.md): The state boundary — creates a store and broadcasts it to all descendants.
+- [media-container](./reference/components/player-container.md): The player's visual and interaction surface for layout, fullscreen, focus, and user activity.
+- [media-controls](./reference/components/controls.md): Container component for composing and auto-hiding video player controls on user interaction
 
 ### Skins
 
 API reference for the packaged skins each preset ships.
 
-- [video-skin](./reference/video-skin.md): The video preset's default skin with the modern, frosted look
-- [video-minimal-skin](./reference/video-minimal-skin.md): The video preset's visually lighter skin, closer to a classic control bar
-- [audio-skin](./reference/audio-skin.md): The audio preset's default skin with the modern, frosted look
-- [audio-minimal-skin](./reference/audio-minimal-skin.md): The audio preset's visually lighter skin, closer to a classic control bar
-- [live-video-skin](./reference/live-video-skin.md): The live video preset's default skin, which swaps time controls for a Live button
-- [live-video-minimal-skin](./reference/live-video-minimal-skin.md): The live video preset's visually lighter skin, closer to a classic control bar
-- [live-audio-skin](./reference/live-audio-skin.md): The live audio preset's default skin, which swaps time controls for a Live button
-- [live-audio-minimal-skin](./reference/live-audio-minimal-skin.md): The live audio preset's visually lighter skin, closer to a classic control bar
-- [background-video-skin](./reference/background-video-skin.md): The background preset's chrome-less skin for ambient video
-
-### UI
-
-API reference for components used to build a media player interface.
-
-- [video-player](./reference/player.md): The state boundary — creates a store and broadcasts it to all descendants.
-- [media-container](./reference/player-container.md): The player's visual and interaction surface for layout, fullscreen, focus, and user activity.
-- [media-airplay-button](./reference/airplay-button.md): Accessible AirPlay toggle button that opens the WebKit playback target picker and reflects session state
-- [media-alert-dialog](./reference/alert-dialog.md): A modal alert dialog for urgent messages that require acknowledgement
-- [media-audio-track-radio-group](./reference/audio-track-radio-group.md): A menu radio group for selecting an audio track
-- [media-buffering-indicator](./reference/buffering-indicator.md): Loading indicator that displays when the video player is buffering or waiting for data
-- [media-captions-button](./reference/captions-button.md): Accessible captions toggle button with availability detection and state reflection
-- [media-captions-radio-group](./reference/captions-radio-group.md): A menu radio group for selecting caption and subtitle tracks
-- [media-cast-button](./reference/cast-button.md): Accessible Cast toggle button with state reflection and keyboard support
-- [media-controls](./reference/controls.md): Container component for composing and auto-hiding video player controls on user interaction
-- [media-dialog](./reference/dialog.md): A modal dialog for application content, including players opened from a thumbnail
-- [media-error-dialog](./reference/error-dialog.md): An alert dialog that presents and dismisses playback errors
-- [media-fullscreen-button](./reference/fullscreen-button.md): Accessible fullscreen toggle button with keyboard support and state reflection
-- [media-gesture](./reference/gesture.md): Map tap and double-tap gestures to player actions
-- [media-hotkey](./reference/hotkey.md): Register a keyboard shortcut that invokes a player action
-- [media-live-button](./reference/live-button.md): Accessible live indicator button that seeks to the live edge when pressed
-- [media-menu](./reference/menu.md): A composable menu component for settings, option selection, and actions
-- [media-mute-button](./reference/mute-button.md): Accessible mute/unmute button with keyboard support and volume state reflection
-- [media-pip-button](./reference/pip-button.md): Accessible picture-in-picture toggle button with keyboard support and state reflection
-- [media-play-button](./reference/play-button.md): Accessible play/pause button with keyboard support and customizable rendering
-- [media-playback-rate-button](./reference/playback-rate-button.md): A button that cycles through playback speed rates
-- [media-playback-rate-radio-group](./reference/playback-rate-radio-group.md): A menu radio group for selecting playback speed
-- [media-popover](./reference/popover.md): A popover component for displaying contextual content anchored to a trigger
-- [media-poster](./reference/poster.md): Poster image component that displays a thumbnail until video playback starts
-- [media-quality-radio-group](./reference/quality-radio-group.md): A menu radio group for selecting video quality
-- [media-seek-button](./reference/seek-button.md): Accessible seek button for skipping forward or backward by a configurable number of seconds
-- [media-seek-indicator](./reference/seek-indicator.md): A temporary visual indicator for keyboard and gesture seeking
-- [media-slider](./reference/slider.md): A composable slider component with track, fill, thumb, preview, and value parts
-- [media-status-announcer](./reference/status-announcer.md): Announce player state changes through a persistent status live region
-- [media-status-indicator](./reference/status-indicator.md): Display temporary visual feedback for keyboard and gesture actions
-- [media-thumbnail](./reference/thumbnail.md): Time-based thumbnail preview component for timeline scrubbing and hover previews
-- [media-time](./reference/time.md): Time display components for showing current time, duration, and remaining time in a video player
-- [media-time-slider](./reference/time-slider.md): A slider component for seeking through media playback time
-- [media-title](./reference/title.md): Displays the resolved content title for the current media
-- [media-tooltip](./reference/tooltip.md): A tooltip component for displaying contextual labels on hover and focus
-- [media-volume-indicator](./reference/volume-indicator.md): Display temporary visual feedback for keyboard and gesture volume actions
-- [media-volume-popover](./reference/volume-popover.md): A volume-aware popover that keeps mute available when volume level controls are unavailable
-- [media-volume-slider](./reference/volume-slider.md): A slider component for controlling media playback volume
+- [video-skin](./reference/components/video-skin.md): The video preset's default skin with the modern, frosted look
+- [video-minimal-skin](./reference/components/video-minimal-skin.md): The video preset's visually lighter skin, closer to a classic control bar
+- [audio-skin](./reference/components/audio-skin.md): The audio preset's default skin with the modern, frosted look
+- [audio-minimal-skin](./reference/components/audio-minimal-skin.md): The audio preset's visually lighter skin, closer to a classic control bar
+- [live-video-skin](./reference/components/live-video-skin.md): The live video preset's default skin, which swaps time controls for a Live button
+- [live-video-minimal-skin](./reference/components/live-video-minimal-skin.md): The live video preset's visually lighter skin, closer to a classic control bar
+- [live-audio-skin](./reference/components/live-audio-skin.md): The live audio preset's default skin, which swaps time controls for a Live button
+- [live-audio-minimal-skin](./reference/components/live-audio-minimal-skin.md): The live audio preset's visually lighter skin, closer to a classic control bar
+- [background-video-skin](./reference/components/background-video-skin.md): The background preset's chrome-less skin for ambient video
 
 ### Media
 
 API reference for media components that handle streaming protocols and playback.
 
-- [audio](./reference/audio.md): Native audio playback that can provide media to a Video.js player
-- [background-video](./reference/background-video.md): Decorative background video element with automatic muting and looping
-- [cloudflare-video](./reference/cloudflare-video.md): Video component that plays Cloudflare Stream videos through the Stream player
-- [dash-video](./reference/dash-video.md): DASH video element powered by dash.js for adaptive bitrate streaming
-- [hls-audio](./reference/hls-audio.md): Audio-only HLS element that plays the audio rendition of an HLS stream
-- [hls-background-video](./reference/hls-background-video.md): HLS background video without controls, audio, captions, or adaptive quality
-- [hls-video](./reference/hls-video.md): Lightweight HLS video element with minimal bundle size
-- [hlsjs-video](./reference/hlsjs-video.md): HLS video element powered by hls.js for adaptive bitrate streaming
-- [mux-audio](./reference/mux-audio.md): Audio element for Mux-hosted HLS streams
-- [mux-background-video](./reference/mux-background-video.md): Mux-specific name for the HLS background video component
-- [mux-video](./reference/mux-video.md): Video element for Mux-hosted HLS streams
-- [native-hls-video](./reference/native-hls-video.md): HLS video element using the browser's built-in HLS support
-- [shaka-video](./reference/shaka-video.md): Video element powered by Shaka Player for DASH, HLS, and progressive playback with DRM
-- [spotify-audio](./reference/spotify-audio.md): Audio component that plays Spotify tracks, episodes, playlists, and shows through the Spotify embed
-- [tiktok-video](./reference/tiktok-video.md): Video component that plays TikTok videos through the TikTok embed player
-- [twitch-video](./reference/twitch-video.md): Video component that plays Twitch videos and live channels through the Twitch embed player
-- [video](./reference/video.md): Native video playback that can provide media to a Video.js player
-- [vimeo-video](./reference/vimeo-video.md): Video component that plays Vimeo videos and live events through the Vimeo player
-- [wistia-video](./reference/wistia-video.md): Video component that plays Wistia-hosted videos through Wistia's web component
-- [youtube-video](./reference/youtube-video.md): Video component that plays YouTube videos and playlists through the YouTube IFrame player
+- [audio](./reference/components/audio.md): Native audio playback that can provide media to a Video.js player
+- [background-video](./reference/components/background-video.md): Decorative background video element with automatic muting and looping
+- [cloudflare-video](./reference/components/cloudflare-video.md): Video component that plays Cloudflare Stream videos through the Stream player
+- [dash-video](./reference/components/dash-video.md): DASH video element powered by dash.js for adaptive bitrate streaming
+- [hls-audio](./reference/components/hls-audio.md): Audio-only HLS element that plays the audio rendition of an HLS stream
+- [hls-background-video](./reference/components/hls-background-video.md): HLS background video without controls, audio, captions, or adaptive quality
+- [hls-video](./reference/components/hls-video.md): Lightweight HLS video element with minimal bundle size
+- [hlsjs-video](./reference/components/hlsjs-video.md): HLS video element powered by hls.js for adaptive bitrate streaming
+- [mux-audio](./reference/components/mux-audio.md): Audio element for Mux-hosted HLS streams
+- [mux-background-video](./reference/components/mux-background-video.md): Mux-specific name for the HLS background video component
+- [mux-video](./reference/components/mux-video.md): Video element for Mux-hosted HLS streams
+- [native-hls-video](./reference/components/native-hls-video.md): HLS video element using the browser's built-in HLS support
+- [shaka-video](./reference/components/shaka-video.md): Video element powered by Shaka Player for DASH, HLS, and progressive playback with DRM
+- [spotify-audio](./reference/components/spotify-audio.md): Audio component that plays Spotify tracks, episodes, playlists, and shows through the Spotify embed
+- [tiktok-video](./reference/components/tiktok-video.md): Video component that plays TikTok videos through the TikTok embed player
+- [twitch-video](./reference/components/twitch-video.md): Video component that plays Twitch videos and live channels through the Twitch embed player
+- [video](./reference/components/video.md): Native video playback that can provide media to a Video.js player
+- [vimeo-video](./reference/components/vimeo-video.md): Video component that plays Vimeo videos and live events through the Vimeo player
+- [wistia-video](./reference/components/wistia-video.md): Video component that plays Wistia-hosted videos through Wistia's web component
+- [youtube-video](./reference/components/youtube-video.md): Video component that plays YouTube videos and playlists through the YouTube IFrame player
 
 ### Extensions
 
 API reference for extensions that connect external services to the player.
 
-- [google-cast](./reference/google-cast.md): Options for the Google Cast extension that configures the receiver and load request
-- [mux-data](./reference/mux-data.md): Options for the Mux Data extension that monitors playback quality
+- [google-cast](./reference/components/google-cast.md): Options for the Google Cast extension that configures the receiver and load request
+- [mux-data](./reference/components/mux-data.md): Options for the Mux Data extension that monitors playback quality
+
+### Buttons
+
+API reference for the button components that trigger playback actions.
+
+- [media-play-button](./reference/components/play-button.md): Accessible play/pause button with keyboard support and customizable rendering
+- [media-mute-button](./reference/components/mute-button.md): Accessible mute/unmute button with keyboard support and volume state reflection
+- [media-seek-button](./reference/components/seek-button.md): Accessible seek button for skipping forward or backward by a configurable number of seconds
+- [media-fullscreen-button](./reference/components/fullscreen-button.md): Accessible fullscreen toggle button with keyboard support and state reflection
+- [media-pip-button](./reference/components/pip-button.md): Accessible picture-in-picture toggle button with keyboard support and state reflection
+- [media-captions-button](./reference/components/captions-button.md): Accessible captions toggle button with availability detection and state reflection
+- [media-playback-rate-button](./reference/components/playback-rate-button.md): A button that cycles through playback speed rates
+- [media-live-button](./reference/components/live-button.md): Accessible live indicator button that seeks to the live edge when pressed
+- [media-airplay-button](./reference/components/airplay-button.md): Accessible AirPlay toggle button that opens the WebKit playback target picker and reflects session state
+- [media-cast-button](./reference/components/cast-button.md): Accessible Cast toggle button with state reflection and keyboard support
+
+### Sliders
+
+API reference for the slider components that scrub time and adjust volume.
+
+- [media-slider](./reference/components/slider.md): A composable slider component with track, fill, thumb, preview, and value parts
+- [media-time-slider](./reference/components/time-slider.md): A slider component for seeking through media playback time
+- [media-volume-slider](./reference/components/volume-slider.md): A slider component for controlling media playback volume
+
+### Menus
+
+API reference for menus, popovers, and the radio groups that pick tracks, quality, and speed.
+
+- [media-menu](./reference/components/menu.md): A composable menu component for settings, option selection, and actions
+- [media-popover](./reference/components/popover.md): A popover component for displaying contextual content anchored to a trigger
+- [media-volume-popover](./reference/components/volume-popover.md): A volume-aware popover that keeps mute available when volume level controls are unavailable
+- [media-audio-track-radio-group](./reference/components/audio-track-radio-group.md): A menu radio group for selecting an audio track
+- [media-captions-radio-group](./reference/components/captions-radio-group.md): A menu radio group for selecting caption and subtitle tracks
+- [media-playback-rate-radio-group](./reference/components/playback-rate-radio-group.md): A menu radio group for selecting playback speed
+- [media-quality-radio-group](./reference/components/quality-radio-group.md): A menu radio group for selecting video quality
+
+### Display
+
+API reference for components that display player state, media metadata, and previews.
+
+- [media-time](./reference/components/time.md): Time display components for showing current time, duration, and remaining time in a video player
+- [media-title](./reference/components/title.md): Displays the resolved content title for the current media
+- [media-poster](./reference/components/poster.md): Poster image component that displays a thumbnail until video playback starts
+- [media-thumbnail](./reference/components/thumbnail.md): Time-based thumbnail preview component for timeline scrubbing and hover previews
+- [media-tooltip](./reference/components/tooltip.md): A tooltip component for displaying contextual labels on hover and focus
+- [media-buffering-indicator](./reference/components/buffering-indicator.md): Loading indicator that displays when the video player is buffering or waiting for data
+- [media-seek-indicator](./reference/components/seek-indicator.md): A temporary visual indicator for keyboard and gesture seeking
+- [media-status-indicator](./reference/components/status-indicator.md): Display temporary visual feedback for keyboard and gesture actions
+- [media-volume-indicator](./reference/components/volume-indicator.md): Display temporary visual feedback for keyboard and gesture volume actions
+
+### Dialogs
+
+API reference for modal dialogs, alerts, and playback error surfaces.
+
+- [media-dialog](./reference/components/dialog.md): A modal dialog for application content, including players opened from a thumbnail
+- [media-alert-dialog](./reference/components/alert-dialog.md): A modal alert dialog for urgent messages that require acknowledgement
+- [media-error-dialog](./reference/components/error-dialog.md): An alert dialog that presents and dismisses playback errors
+
+### Behavior
+
+API reference for the non-visual components that add gestures, hotkeys, and announcements.
+
+- [media-gesture](./reference/components/gesture.md): Map tap and double-tap gestures to player actions
+- [media-hotkey](./reference/components/hotkey.md): Register a keyboard shortcut that invokes a player action
+- [media-status-announcer](./reference/components/status-announcer.md): Announce player state changes through a persistent status live region
+
+## API
+
+API reference for the player factory, store controllers, features, translation tools, and utilities.
+
+Section index: [reference/api/llms.txt](./reference/api/llms.txt).
+
+### Player
+
+API reference for creating a player and reaching it and its container from your own code.
+
+- [createPlayer](./reference/api/html-create-player.md): Factory function that creates a typed player element and controller for HTML custom elements
+- [PlayerController](./reference/api/player-controller.md): Reactive controller for accessing player store state in HTML custom elements
+
+### Store
 
-## Helpers
+API reference for reading and subscribing to player state: selectors and the store controllers.
 
-Reference for player features and lower-level tools used to build or extend a player.
+- [createSelector](./reference/api/create-selector.md): Create a type-safe selector for a store slice's state
+- [StoreController](./reference/api/store-controller.md): Reactive controller for subscribing to store state in HTML custom elements
+- [SnapshotController](./reference/api/snapshot-controller.md): Reactive controller for subscribing to a State container in HTML custom elements
+- [SubscriptionController](./reference/api/subscription-controller.md): Reactive controller that resolves a store and manages a derived subscription
 
-### Player Features
+### Features
 
 API reference for the feature modules passed to createPlayer, which provide player capabilities and state.
 
-- [createSelector](./reference/create-selector.md): Create a type-safe selector for a store slice's state
-- [Buffer](./reference/feature-buffer.md): Buffered and seekable time range state for the player store
-- [Controls](./reference/feature-controls.md): User activity and controls visibility state for the player store
-- [Error](./reference/feature-error.md): Media error state and actions for the player store
-- [Fullscreen](./reference/feature-fullscreen.md): Fullscreen state and actions for the player store
-- [Live](./reference/feature-live.md): Live edge state for the player store
-- [Metadata](./reference/feature-metadata.md): Resolved title and poster values for the player store
-- [Orientation lock](./reference/feature-orientation-lock.md): Screen orientation locking while fullscreen is active
-- [Picture-in-picture](./reference/feature-pip.md): Picture-in-picture state and actions for the player store
-- [Playback](./reference/feature-playback.md): Play/pause state and actions for the player store
-- [Playback rate](./reference/feature-playback-rate.md): Playback speed state and actions for the player store
-- [Quality](./reference/feature-quality.md): Video rendition state and actions for the player store
-- [Audio track](./reference/feature-audio-track.md): Audio track state and actions for the player store
-- [Remote Playback](./reference/feature-remote-playback.md): Remote playback state and actions for the player store
-- [Source](./reference/feature-source.md): Media source state and actions for the player store
-- [Stream type](./reference/feature-stream-type.md): Stream delivery type (live / on-demand) state for the player store
-- [Text tracks](./reference/feature-text-tracks.md): Subtitles, captions, and chapter track state for the player store
-- [Time](./reference/feature-time.md): Playback position and duration state for the player store
-- [Volume](./reference/feature-volume.md): Volume level and mute state for the player store
-
-### Utilities
-
-API reference for the hooks, utilities, controllers, and mixins used to integrate a player into an application.
-
-- [createPlayer](./reference/html-create-player.md): Factory function that creates a typed player element and controller for HTML custom elements
-- [PlayerController](./reference/player-controller.md): Reactive controller for accessing player store state in HTML custom elements
-- [createI18n](./reference/create-i18n.md): Factory that creates framework i18n helpers with custom loading options
-- [media-i18n](./reference/media-i18n.md): HTML custom element that resolves locale and supplies translations to descendants
-- [media-text](./reference/media-text.md): HTML custom element that renders a translated string by semantic key
-#### Advanced
-
-Lower-level translation, player context, lifecycle, attachment, and state tools.
-
-- [Translation phrases](./reference/translation-phrases.md): Semantic i18n keys, their English defaults, and the player UI that uses them
-- [registerI18n](./reference/register-i18n.md): Register or merge translation strings for a BCP 47 locale tag in the global i18n registry
-- [getI18nTranslations](./reference/get-i18n-translations.md): Read the merged translation map for a locale using BCP 47 parent-chain fallback
-- [hasRegisteredLocale](./reference/has-registered-locale.md): Check whether an exact locale tag exists in the global i18n registry
-- [onI18nRegistryChange](./reference/on-i18n-registry-change.md): Subscribe to global i18n registry mutations
-- [createTranslator](./reference/create-translator.md): Build a typed translator from a resolved translation map
-- [i18nContext](./reference/html-i-18-n-context.md): Default HTML context carrying the active translator and locale
-- [I18nController](./reference/i-18-n-controller.md): Reactive controller for consuming translator and locale values from an HTML i18n context
-- [AriaKeyShortcutsController](./reference/aria-key-shortcuts-controller.md): Reactive controller that exposes registered hotkey shortcut metadata
-- [MediaAttachMixin](./reference/media-attach-mixin.md): Mixin for custom media elements to register themselves with the provider via context
-- [playerContext](./reference/player-context.md): The default player context instance for consuming the player store in controllers
-- [SnapshotController](./reference/snapshot-controller.md): Reactive controller for subscribing to a State container in HTML custom elements
-- [StoreController](./reference/store-controller.md): Reactive controller for subscribing to store state in HTML custom elements
-- [SubscriptionController](./reference/subscription-controller.md): Reactive controller that resolves a store and manages a derived subscription
+- [Buffer](./reference/api/feature-buffer.md): Buffered and seekable time range state for the player store
+- [Controls](./reference/api/feature-controls.md): User activity and controls visibility state for the player store
+- [Error](./reference/api/feature-error.md): Media error state and actions for the player store
+- [Fullscreen](./reference/api/feature-fullscreen.md): Fullscreen state and actions for the player store
+- [Live](./reference/api/feature-live.md): Live edge state for the player store
+- [Metadata](./reference/api/feature-metadata.md): Resolved title and poster values for the player store
+- [Orientation lock](./reference/api/feature-orientation-lock.md): Screen orientation locking while fullscreen is active
+- [Picture-in-picture](./reference/api/feature-pip.md): Picture-in-picture state and actions for the player store
+- [Playback](./reference/api/feature-playback.md): Play/pause state and actions for the player store
+- [Playback rate](./reference/api/feature-playback-rate.md): Playback speed state and actions for the player store
+- [Quality](./reference/api/feature-quality.md): Video rendition state and actions for the player store
+- [Audio track](./reference/api/feature-audio-track.md): Audio track state and actions for the player store
+- [Remote Playback](./reference/api/feature-remote-playback.md): Remote playback state and actions for the player store
+- [Source](./reference/api/feature-source.md): Media source state and actions for the player store
+- [Stream type](./reference/api/feature-stream-type.md): Stream delivery type (live / on-demand) state for the player store
+- [Text tracks](./reference/api/feature-text-tracks.md): Subtitles, captions, and chapter track state for the player store
+- [Time](./reference/api/feature-time.md): Playback position and duration state for the player store
+- [Volume](./reference/api/feature-volume.md): Volume level and mute state for the player store
+
+### i18n
+
+API reference for translating the player: the i18n elements, controller, and the phrase registry.
+
+- [createI18n](./reference/api/create-i18n.md): Factory that creates framework i18n helpers with custom loading options
+- [media-i18n](./reference/api/media-i18n.md): HTML custom element that resolves locale and supplies translations to descendants
+- [media-text](./reference/api/media-text.md): HTML custom element that renders a translated string by semantic key
+- [Translation phrases](./reference/api/translation-phrases.md): Semantic i18n keys, their English defaults, and the player UI that uses them
+- [registerI18n](./reference/api/register-i18n.md): Register or merge translation strings for a BCP 47 locale tag in the global i18n registry
+- [getI18nTranslations](./reference/api/get-i18n-translations.md): Read the merged translation map for a locale using BCP 47 parent-chain fallback
+- [hasRegisteredLocale](./reference/api/has-registered-locale.md): Check whether an exact locale tag exists in the global i18n registry
+- [onI18nRegistryChange](./reference/api/on-i18n-registry-change.md): Subscribe to global i18n registry mutations
+- [createTranslator](./reference/api/create-translator.md): Build a typed translator from a resolved translation map
+- [I18nController](./reference/api/i18n-controller.md): Reactive controller for consuming translator and locale values from an HTML i18n context
+
+### Utils
+
+Lower-level building blocks for custom components: the keyboard shortcut controller.
+
+- [AriaKeyShortcutsController](./reference/api/aria-key-shortcuts-controller.md): Reactive controller that exposes registered hotkey shortcut metadata
+
+### Error codes
+
+Reference for codes thrown when Video.js 8 APIs are used with the Video.js 10 package.
+
+- [Error Codes](./reference/api/error-codes.md): Error codes emitted by the video.js package and how to resolve them
+- [VJS8_LEGACY_INIT](./reference/api/vjs8-legacy-init.md): Legacy Video.js 8 player initialization error
+- [VJS8_LEGACY_PLUGIN](./reference/api/vjs8-legacy-plugin.md): Legacy Video.js 8 plugin registration error
+- [VJS8_LEGACY_COMPONENT](./reference/api/vjs8-legacy-component.md): Legacy Video.js 8 component registration error
+- [VJS8_LEGACY_GET_PLAYER](./reference/api/vjs8-legacy-get-player.md): Legacy Video.js 8 player lookup error
+- [VJS8_LEGACY_OPTIONS](./reference/api/vjs8-legacy-options.md): Legacy Video.js 8 global options error

package/docs/reference/api/aria-key-shortcuts-controller.md

@@ -0,0 +1,50 @@
+# AriaKeyShortcutsController
+
+Reactive controller that exposes registered hotkey shortcut metadata
+
+## Import
+
+```ts
+import { AriaKeyShortcutsController } from "@videojs/html";
+```
+
+## Usage
+
+Create the controller on a reactive element inside a player container. It follows the container’s hotkey registrations and requests a host update when they change.
+
+```ts
+class CustomPlayButton extends UIElement {
+  readonly #shortcut = new AriaKeyShortcutsController(this, "togglePaused");
+
+  get ariaKeyShortcuts() {
+    return this.#shortcut.aria;
+  }
+
+  get shortcutLabel() {
+    return this.#shortcut.shortcut;
+  }
+}
+```
+
+Use `aria` for the element’s `aria-keyshortcuts` value and `shortcut` for display text. Both are `undefined` until the matching action has a registered shortcut.
+
+## API Reference
+
+`new AriaKeyShortcutsController(host, action, options?)`
+
+### Parameters
+
+| Parameter | Type | Default | Description |
+| --- | --- | --- | --- |
+| `host` (required) | `{ addController(controller: ReactiveController): void; removeController(controller: ReactiveController): void; requestUpdate(): void; updateComplete: Promise<boolean> } & HTMLElement` | — | Host element whose nearest player container supplies hotkey registrations. |
+| `action` (required) | `string` | — | Registered hotkey action to look up. |
+| `options` | `{ value?: (() => number \| undefined) }` | `{}` | Optional value resolver for value-dependent shortcuts. |
+
+### Return Value
+
+| Property | Type |
+| --- | --- |
+| `value` | `string \| undefined` |
+| `aria` | `string \| undefined` |
+| `shortcut` | `string \| undefined` |
+| `details` | `{ aria?: string; shortcut?: string }` |

package/docs/reference/api/create-i18n.md

@@ -0,0 +1,40 @@
+# createI18n
+
+Factory that creates framework i18n helpers with custom loading options
+
+## Import
+
+```ts
+import { createI18n } from "@videojs/html/i18n";
+```
+
+`createI18n` returns a context-bound `ProviderMixin`, `TextMixin`, and `I18nController` for custom elements. Use it when you need a custom locale loader or custom i18n elements. Most apps use `<media-i18n>` and `<media-text>` from `@videojs/html/i18n`.
+
+```ts
+import { ReactiveElement } from '@videojs/element';
+import { createI18n } from '@videojs/html/i18n';
+
+const { ProviderMixin, TextMixin } = createI18n();
+
+class LocalizedRoot extends ProviderMixin(ReactiveElement) {}
+class LocalizedText extends TextMixin(ReactiveElement) {}
+```
+
+## API Reference
+
+`createI18n(options?): CreateI18nResult`
+
+### Parameters
+
+| Parameter | Type | Default |
+| --- | --- | --- |
+| `options` | `{ loader?: ((tag: string) => Promise<Partial<FlatTranslations> \| undefined>) }` | — |
+
+### Return Value
+
+| Property | Type |
+| --- | --- |
+| `context` | `Context<symbol, I18nContextValue>` |
+| `I18nController` | `typeof I18nController` |
+| `ProviderMixin` | `(<Base extends ReactiveElementMixinBase>(Base: Base) => Constructor<ReactiveElement> & Base)` |
+| `TextMixin` | `(<Base extends ReactiveElementMixinBase>(Base: Base) => Constructor<ReactiveElement> & Base)` |