# Video.js v10 — React 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 122k tokens): https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/llms-full.txt

## Layout

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

- [Player](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/player.md): The state boundary — creates a store and broadcasts it to all descendants.
- [Container](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/player-container.md): The player's visual and interaction surface for layout, fullscreen, focus, and user activity.
- [Controls](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/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.

- [VideoSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/video-skin.md): The video preset's default skin with the modern, frosted look
- [NeutralVideoSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/video-neutral-skin.md): The video preset's visually lighter skin, closer to a classic control bar
- [CompatVideoSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/video-compat-skin.md): A video skin designed for broader browser compatibility
- [ScaffoldVideoSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/video-scaffold-skin.md): A video skin with minimal styling for custom skins
- [AudioSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/audio-skin.md): The audio preset's default skin with the modern, frosted look
- [NeutralAudioSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/audio-neutral-skin.md): The audio preset's visually lighter skin, closer to a classic control bar
- [CompatAudioSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/audio-compat-skin.md): An audio skin designed for broader browser compatibility
- [ScaffoldAudioSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/audio-scaffold-skin.md): An audio skin with minimal styling for custom skins
- [LiveVideoSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/live-video-skin.md): The live video preset's default skin, which swaps time controls for a Live button
- [NeutralLiveVideoSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/live-video-neutral-skin.md): The live video preset's visually lighter skin, closer to a classic control bar
- [CompatLiveVideoSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/live-video-compat-skin.md): A live video skin designed for broader browser compatibility
- [ScaffoldLiveVideoSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/live-video-scaffold-skin.md): A live video skin with minimal styling for custom skins
- [LiveAudioSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/live-audio-skin.md): The live audio preset's default skin, which swaps time controls for a Live button
- [NeutralLiveAudioSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/live-audio-neutral-skin.md): The live audio preset's visually lighter skin, closer to a classic control bar
- [CompatLiveAudioSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/live-audio-compat-skin.md): A live audio skin designed for broader browser compatibility
- [ScaffoldLiveAudioSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/live-audio-scaffold-skin.md): A live audio skin with minimal styling for custom skins
- [BackgroundVideoSkin](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/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/react/reference/components/audio.md): Native audio playback that can provide media to a Video.js player
- [BackgroundVideo](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/background-video.md): Decorative background video element with automatic muting and looping
- [CloudflareVideo](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/cloudflare-video.md): Video component that plays Cloudflare Stream videos through the Stream player
- [DashVideo](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/dash-video.md): DASH video element powered by dash.js for adaptive bitrate streaming
- [HlsAudio](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/hls-audio.md): Audio-only HLS element that plays the audio rendition of an HLS stream
- [HlsBackgroundVideo](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/hls-background-video.md): HLS background video without controls, audio, captions, or adaptive quality
- [HlsVideo](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/hls-video.md): Lightweight HLS video element with minimal bundle size
- [HlsJsVideo](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/hlsjs-video.md): HLS video element powered by hls.js for adaptive bitrate streaming
- [MuxAudio](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/mux-audio.md): Audio element for Mux-hosted HLS streams
- [MuxBackgroundVideo](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/mux-background-video.md): Mux-specific name for the HLS background video component
- [MuxVideo](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/mux-video.md): Video element for Mux-hosted HLS streams
- [NativeHlsVideo](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/native-hls-video.md): HLS video element using the browser's built-in HLS support
- [PlayerJsVideo](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/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
- [ShakaVideo](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/shaka-video.md): Video element powered by Shaka Player for DASH, HLS, and progressive playback with DRM
- [SpotifyAudio](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/spotify-audio.md): Audio component that plays Spotify tracks, episodes, playlists, and shows through the Spotify embed
- [TikTokVideo](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/tiktok-video.md): Video component that plays TikTok videos through the TikTok embed player
- [TwitchVideo](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/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/react/reference/components/video.md): Native video playback that can provide media to a Video.js player
- [VimeoVideo](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/vimeo-video.md): Video component that plays Vimeo videos and live events through the Vimeo player
- [WistiaVideo](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/wistia-video.md): Video component that plays Wistia-hosted videos through Wistia's web component
- [YouTubeVideo](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/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.

- [GoogleCast](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/google-cast.md): Options for the Google Cast extension that configures the receiver and load request
- [MuxData](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/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.

- [PlayButton](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/play-button.md): Accessible play/pause button with keyboard support and customizable rendering
- [MuteButton](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/mute-button.md): Accessible mute/unmute button with keyboard support and volume state reflection
- [SeekButton](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/seek-button.md): Accessible seek button for skipping forward or backward by a configurable number of seconds
- [FullscreenButton](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/fullscreen-button.md): Accessible fullscreen toggle button with keyboard support and state reflection
- [PiPButton](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/pip-button.md): Accessible picture-in-picture toggle button with keyboard support and state reflection
- [CaptionsButton](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/captions-button.md): Accessible captions toggle button with availability detection and state reflection
- [PlaybackRateButton](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/playback-rate-button.md): A button that cycles through playback speed rates
- [LiveButton](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/live-button.md): Accessible live indicator button that seeks to the live edge when pressed
- [AirPlayButton](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/airplay-button.md): Accessible AirPlay toggle button that opens the WebKit playback target picker and reflects session state
- [CastButton](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/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.

- [Slider](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/slider.md): A composable slider component with track, fill, thumb, preview, and value parts
- [TimeSlider](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/time-slider.md): A slider component for seeking through media playback time
- [VolumeSlider](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/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.

- [Menu](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/menu.md): A composable menu component for settings, option selection, and actions
- [Popover](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/popover.md): A popover component for displaying contextual content anchored to a trigger
- [VolumePopover](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/volume-popover.md): A volume-aware popover that keeps mute available when volume level controls are unavailable
- [AudioTrackRadioGroup](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/audio-track-radio-group.md): A menu radio group for selecting an audio track
- [CaptionsRadioGroup](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/captions-radio-group.md): A menu radio group for selecting caption and subtitle tracks
- [PlaybackRateRadioGroup](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/playback-rate-radio-group.md): A menu radio group for selecting playback speed
- [QualityRadioGroup](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/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.

- [Time](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/time.md): Time display components for showing current time, duration, and remaining time in a video player
- [Title](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/title.md): Displays the resolved content title for the current media
- [Poster](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/poster.md): Poster image component that displays a thumbnail until video playback starts
- [Thumbnail](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/thumbnail.md): Time-based thumbnail preview component for timeline scrubbing and hover previews
- [Tooltip](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/tooltip.md): A tooltip component for displaying contextual labels on hover and focus
- [BufferingIndicator](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/buffering-indicator.md): Loading indicator that displays when the video player is buffering or waiting for data
- [SeekIndicator](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/seek-indicator.md): A temporary visual indicator for keyboard and gesture seeking
- [StatusIndicator](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/status-indicator.md): Display temporary visual feedback for keyboard and gesture actions
- [VolumeIndicator](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/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.

- [Dialog](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/dialog.md): A modal dialog for application content, including players opened from a thumbnail
- [AlertDialog](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/alert-dialog.md): A modal alert dialog for urgent messages that require acknowledgement
- [ErrorDialog](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/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.

- [Gesture](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/gesture.md): Map tap and double-tap gestures to player actions
- [Hotkey](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/components/hotkey.md): Register a keyboard shortcut that invokes a player action
- [StatusAnnouncer](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/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/react/reference/components/icons.md): The SVG icon sets used by the packaged skins, as React components, SVG strings, and the media-icon element

---

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