# Video.js v10 — HTML Components

> API reference for skins, media components, extensions, and interface components. Every page below is also available as Markdown at its `.md` URL. This section in one file (about 124k tokens): https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/llms-full.txt

## Layout

API reference for the components that establish a player and lay out its interface.

- [video-player](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/player.md): The state boundary — creates a store and broadcasts it to all descendants.
- [media-container](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/player-container.md): The player's visual and interaction surface for layout, fullscreen, focus, and user activity.
- [media-controls](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/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](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/video-skin.md): The video preset's default skin with the modern, frosted look
- [video-neutral-skin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/video-neutral-skin.md): The video preset's visually lighter skin, closer to a classic control bar
- [video-compat-skin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/video-compat-skin.md): A video skin designed for broader browser compatibility
- [video-scaffold-skin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/video-scaffold-skin.md): A video skin with minimal styling for custom skins
- [audio-skin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/audio-skin.md): The audio preset's default skin with the modern, frosted look
- [audio-neutral-skin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/audio-neutral-skin.md): The audio preset's visually lighter skin, closer to a classic control bar
- [audio-compat-skin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/audio-compat-skin.md): An audio skin designed for broader browser compatibility
- [audio-scaffold-skin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/audio-scaffold-skin.md): An audio skin with minimal styling for custom skins
- [live-video-skin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/live-video-skin.md): The live video preset's default skin, which swaps time controls for a Live button
- [live-video-neutral-skin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/live-video-neutral-skin.md): The live video preset's visually lighter skin, closer to a classic control bar
- [live-video-compat-skin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/live-video-compat-skin.md): A live video skin designed for broader browser compatibility
- [live-video-scaffold-skin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/live-video-scaffold-skin.md): A live video skin with minimal styling for custom skins
- [live-audio-skin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/live-audio-skin.md): The live audio preset's default skin, which swaps time controls for a Live button
- [live-audio-neutral-skin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/live-audio-neutral-skin.md): The live audio preset's visually lighter skin, closer to a classic control bar
- [live-audio-compat-skin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/live-audio-compat-skin.md): A live audio skin designed for broader browser compatibility
- [live-audio-scaffold-skin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/live-audio-scaffold-skin.md): A live audio skin with minimal styling for custom skins
- [background-video-skin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/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](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/audio.md): Native audio playback that can provide media to a Video.js player
- [background-video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/background-video.md): Decorative background video element with automatic muting and looping
- [cloudflare-video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/cloudflare-video.md): Video component that plays Cloudflare Stream videos through the Stream player
- [dash-video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/dash-video.md): DASH video element powered by dash.js for adaptive bitrate streaming
- [hls-audio](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/hls-audio.md): Audio-only HLS element that plays the audio rendition of an HLS stream
- [hls-background-video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/hls-background-video.md): HLS background video without controls, audio, captions, or adaptive quality
- [hls-video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/hls-video.md): Lightweight HLS video element with minimal bundle size
- [hlsjs-video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/hlsjs-video.md): HLS video element powered by hls.js for adaptive bitrate streaming
- [mux-audio](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/mux-audio.md): Audio element for Mux-hosted HLS streams
- [mux-background-video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/mux-background-video.md): Mux-specific name for the HLS background video component
- [mux-video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/mux-video.md): Video element for Mux-hosted HLS streams
- [native-hls-video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/native-hls-video.md): HLS video element using the browser's built-in HLS support
- [playerjs-video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/playerjs-video.md): Video component that plays any embed implementing the player.js protocol, such as Mux Player, Gumlet, FrameRate, Livid, Bunny Stream, and Streamable
- [shaka-video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/shaka-video.md): Video element powered by Shaka Player for DASH, HLS, and progressive playback with DRM
- [spotify-audio](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/spotify-audio.md): Audio component that plays Spotify tracks, episodes, playlists, and shows through the Spotify embed
- [tiktok-video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/tiktok-video.md): Video component that plays TikTok videos through the TikTok embed player
- [twitch-video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/twitch-video.md): Video component that plays Twitch videos and live channels through the Twitch embed player
- [video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/video.md): Native video playback that can provide media to a Video.js player
- [vimeo-video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/vimeo-video.md): Video component that plays Vimeo videos and live events through the Vimeo player
- [wistia-video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/wistia-video.md): Video component that plays Wistia-hosted videos through Wistia's web component
- [youtube-video](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/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](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/google-cast.md): Options for the Google Cast extension that configures the receiver and load request
- [mux-data](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/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](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/play-button.md): Accessible play/pause button with keyboard support and customizable rendering
- [media-mute-button](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/mute-button.md): Accessible mute/unmute button with keyboard support and volume state reflection
- [media-seek-button](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/seek-button.md): Accessible seek button for skipping forward or backward by a configurable number of seconds
- [media-fullscreen-button](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/fullscreen-button.md): Accessible fullscreen toggle button with keyboard support and state reflection
- [media-pip-button](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/pip-button.md): Accessible picture-in-picture toggle button with keyboard support and state reflection
- [media-captions-button](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/captions-button.md): Accessible captions toggle button with availability detection and state reflection
- [media-playback-rate-button](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/playback-rate-button.md): A button that cycles through playback speed rates
- [media-live-button](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/live-button.md): Accessible live indicator button that seeks to the live edge when pressed
- [media-airplay-button](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/airplay-button.md): Accessible AirPlay toggle button that opens the WebKit playback target picker and reflects session state
- [media-cast-button](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/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](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/slider.md): A composable slider component with track, fill, thumb, preview, and value parts
- [media-time-slider](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/time-slider.md): A slider component for seeking through media playback time
- [media-volume-slider](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/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](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/menu.md): A composable menu component for settings, option selection, and actions
- [media-popover](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/popover.md): A popover component for displaying contextual content anchored to a trigger
- [media-volume-popover](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/volume-popover.md): A volume-aware popover that keeps mute available when volume level controls are unavailable
- [media-audio-track-radio-group](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/audio-track-radio-group.md): A menu radio group for selecting an audio track
- [media-captions-radio-group](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/captions-radio-group.md): A menu radio group for selecting caption and subtitle tracks
- [media-playback-rate-radio-group](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/playback-rate-radio-group.md): A menu radio group for selecting playback speed
- [media-quality-radio-group](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/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](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/time.md): Time display components for showing current time, duration, and remaining time in a video player
- [media-title](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/title.md): Displays the resolved content title for the current media
- [media-poster](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/poster.md): Poster image component that displays a thumbnail until video playback starts
- [media-thumbnail](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/thumbnail.md): Time-based thumbnail preview component for timeline scrubbing and hover previews
- [media-tooltip](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/tooltip.md): A tooltip component for displaying contextual labels on hover and focus
- [media-buffering-indicator](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/buffering-indicator.md): Loading indicator that displays when the video player is buffering or waiting for data
- [media-seek-indicator](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/seek-indicator.md): A temporary visual indicator for keyboard and gesture seeking
- [media-status-indicator](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/status-indicator.md): Display temporary visual feedback for keyboard and gesture actions
- [media-volume-indicator](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/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](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/dialog.md): A modal dialog for application content, including players opened from a thumbnail
- [media-alert-dialog](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/alert-dialog.md): A modal alert dialog for urgent messages that require acknowledgement
- [media-error-dialog](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/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](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/gesture.md): Map tap and double-tap gestures to player actions
- [media-hotkey](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/hotkey.md): Register a keyboard shortcut that invokes a player action
- [media-status-announcer](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/status-announcer.md): Announce player state changes through a persistent status live region

## Icons

API reference for the icon sets the skins use, available for your own controls.

- [Icons](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/html/reference/components/icons.md): The SVG icon sets used by the packaged skins, as React components, SVG strings, and the media-icon element

---

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