# Video.js v10 — HTML Components

> API reference for skins, media components, extensions, and interface components. Bundled with `@videojs/html` v10.0.0-rc.3. Links are relative paths to files in this directory.

## Layout

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

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