# Video.js v10 — React Documentation ## Start here Install Video.js, understand its main pieces, or move an existing player to Video.js 10. - [Installation](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/how-to/installation.md): Install Video.js and build your first player with streaming support and accessible controls - [Overview](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/concepts/overview.md): How Video.js players are structured — state, UI, media, and extensions - [Why Video.js?](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/concepts/why-videojs.md): The open-source video player for React and HTML. Lightweight, accessible components built for performance and streaming. - [v10 Roadmap](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/concepts/v10-roadmap.md): Timeline and milestones for Video.js v10 rebuild and the future of v8 ### Migrate to Video.js 10 Guides for moving an existing player integration to Video.js v10, one per player you might be coming from. - [Migrate from Video.js 8](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/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](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/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](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/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](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/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 ## Tooling Guidance for AI tools, browser support, TypeScript, bundlers, and loading Video.js from a CDN. - [Build with AI](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/how-to/build-with-ai.md): How to give AI tools the context they need to build Video.js players alongside you - [Browser support](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/concepts/browser-support.md): Browsers and rendering environments supported by Video.js 10 - [TypeScript](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/concepts/typescript.md): TypeScript version and module resolution requirements for Video.js packages - [Bundlers](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/concepts/bundlers.md): Bundler requirements for Video.js package exports, CSS, and wrapper libraries ## Concepts Understanding-oriented pages that explain how and why things work. Read these to build a mental model of the library. - [Features](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/concepts/features.md): The state and actions each feature adds to the player - [Skins](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/concepts/skins.md): Packaged player designs that include both UI components and their styles. - [Presets](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/concepts/presets.md): Pre-packaged player configurations that bundle state management, skins, and media elements for specific use cases. - [UI components](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/concepts/ui-components.md): How Video.js UI components use focused elements, data attributes for state, and compound composition. - [Accessibility](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/concepts/accessibility.md): How Video.js approaches accessibility, and what you should consider if you're deeply customizing your player - [Media sources](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/concepts/media-sources.md): Set what a media element plays and how its engine plays it with the structured source property - [Mux Data](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/concepts/mux-data.md): Monitor playback quality and viewer experience by adding the Mux Data extension to a player - [Security](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/concepts/security.md): How to configure Content Security Policy for your video player ## How to 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. - [Customize skins](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/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](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/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](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/how-to/add-a-poster-and-loading-placeholder.md): Set the image shown before playback, then add a lightweight placeholder while it loads - [Autoplay](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/how-to/autoplay.md): Start playback automatically and handle browser autoplay restrictions. - [Automatically show and hide controls](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/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](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/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](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/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](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/how-to/play-live-streams.md): Play live streams with live-edge tracking, DVR windows, and stream-type detection. - [Add a quality selector](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/how-to/add-quality-selector.md): Read available renditions, let the engine adapt automatically, and offer manual quality selection. - [Go fullscreen and lock orientation](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/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](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/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](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/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](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/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](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/how-to/handle-playback-errors.md): Surface terminal playback errors and give users a useful next step. - [Remember user preferences](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/how-to/remember-user-preferences.md): Persist volume, caption, and quality preferences across sessions by subscribing to player state. - [Add a background video](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/how-to/add-a-background-video.md): Add an accessible background video from an MP4, WebM, HLS, or Mux source - [Internationalize the player](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/how-to/internationalize-the-player.md): Translate player labels and announcements: shipped locale packs, custom translations, runtime switching, and server rendering. ## Components API reference for skins, interface components, media components, and service integrations. ### Skins API reference for the packaged skins each preset ships. - [VideoSkin](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/video-skin.md): The video preset's default skin with the modern, frosted look - [MinimalVideoSkin](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/video-minimal-skin.md): The video preset's visually lighter skin, closer to a classic control bar - [AudioSkin](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/audio-skin.md): The audio preset's default skin with the modern, frosted look - [MinimalAudioSkin](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/audio-minimal-skin.md): The audio preset's visually lighter skin, closer to a classic control bar - [LiveVideoSkin](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/live-video-skin.md): The live video preset's default skin, which swaps time controls for a Live button - [MinimalLiveVideoSkin](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/live-video-minimal-skin.md): The live video preset's visually lighter skin, closer to a classic control bar - [LiveAudioSkin](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/live-audio-skin.md): The live audio preset's default skin, which swaps time controls for a Live button - [MinimalLiveAudioSkin](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/live-audio-minimal-skin.md): The live audio preset's visually lighter skin, closer to a classic control bar - [BackgroundVideoSkin](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/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. - [Player](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/player.md): The state boundary — creates a store and broadcasts it to all descendants. - [Container](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/player-container.md): The player's visual and interaction surface for layout, fullscreen, focus, and user activity. - [I18nProvider](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/i18n-provider.md): React provider that resolves locale and supplies a typed translator to descendants - [AirPlayButton](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/airplay-button.md): Accessible AirPlay toggle button that opens the WebKit playback target picker and reflects session state - [AlertDialog](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/alert-dialog.md): A modal alert dialog for urgent messages that require acknowledgement - [AudioTrackRadioGroup](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/audio-track-radio-group.md): A menu radio group for selecting an audio track - [BufferingIndicator](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/buffering-indicator.md): Loading indicator that displays when the video player is buffering or waiting for data - [CaptionsButton](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/captions-button.md): Accessible captions toggle button with availability detection and state reflection - [CaptionsRadioGroup](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/captions-radio-group.md): A menu radio group for selecting caption and subtitle tracks - [CastButton](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/cast-button.md): Accessible Cast toggle button with state reflection and keyboard support - [Controls](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/controls.md): Container component for composing and auto-hiding video player controls on user interaction - [Dialog](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/dialog.md): A modal dialog for application content, including players opened from a thumbnail - [ErrorDialog](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/error-dialog.md): An alert dialog that presents and dismisses playback errors - [FullscreenButton](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/fullscreen-button.md): Accessible fullscreen toggle button with keyboard support and state reflection - [Gesture](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/gesture.md): Map tap and double-tap gestures to player actions - [Hotkey](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/hotkey.md): Register a keyboard shortcut that invokes a player action - [LiveButton](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/live-button.md): Accessible live indicator button that seeks to the live edge when pressed - [Menu](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/menu.md): A composable menu component for settings, option selection, and actions - [MuteButton](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/mute-button.md): Accessible mute/unmute button with keyboard support and volume state reflection - [PiPButton](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/pip-button.md): Accessible picture-in-picture toggle button with keyboard support and state reflection - [PlayButton](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/play-button.md): Accessible play/pause button with keyboard support and customizable rendering - [PlaybackRateButton](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/playback-rate-button.md): A button that cycles through playback speed rates - [PlaybackRateRadioGroup](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/playback-rate-radio-group.md): A menu radio group for selecting playback speed - [Popover](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/popover.md): A popover component for displaying contextual content anchored to a trigger - [Poster](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/poster.md): Poster image component that displays a thumbnail until video playback starts - [QualityRadioGroup](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/quality-radio-group.md): A menu radio group for selecting video quality - [SeekButton](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/seek-button.md): Accessible seek button for skipping forward or backward by a configurable number of seconds - [SeekIndicator](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/seek-indicator.md): A temporary visual indicator for keyboard and gesture seeking - [Slider](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/slider.md): A composable slider component with track, fill, thumb, preview, and value parts - [StatusAnnouncer](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/status-announcer.md): Announce player state changes through a persistent status live region - [StatusIndicator](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/status-indicator.md): Display temporary visual feedback for keyboard and gesture actions - [Thumbnail](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/thumbnail.md): Time-based thumbnail preview component for timeline scrubbing and hover previews - [Time](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/time.md): Time display components for showing current time, duration, and remaining time in a video player - [TimeSlider](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/time-slider.md): A slider component for seeking through media playback time - [Title](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/title.md): Displays the resolved content title for the current media - [Tooltip](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/tooltip.md): A tooltip component for displaying contextual labels on hover and focus - [VolumeIndicator](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/volume-indicator.md): Display temporary visual feedback for keyboard and gesture volume actions - [VolumePopover](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/volume-popover.md): A volume-aware popover that keeps mute available when volume level controls are unavailable - [VolumeSlider](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/volume-slider.md): A slider component for controlling media playback volume ### Media API reference for media components that handle streaming protocols and playback. - [Audio](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/audio.md): Native audio playback that can provide media to a Video.js player - [BackgroundVideo](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/background-video.md): Decorative background video element with automatic muting and looping - [CloudflareVideo](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/cloudflare-video.md): Video component that plays Cloudflare Stream videos through the Stream player - [DashVideo](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/dash-video.md): DASH video element powered by dash.js for adaptive bitrate streaming - [HlsAudio](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/hls-audio.md): Audio-only HLS element that plays the audio rendition of an HLS stream - [HlsBackgroundVideo](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/hls-background-video.md): HLS background video without controls, audio, captions, or adaptive quality - [HlsVideo](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/hls-video.md): Lightweight HLS video element with minimal bundle size - [HlsJsVideo](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/hlsjs-video.md): HLS video element powered by hls.js for adaptive bitrate streaming - [MuxAudio](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/mux-audio.md): Audio element for Mux-hosted HLS streams - [MuxBackgroundVideo](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/mux-background-video.md): Mux-specific name for the HLS background video component - [MuxVideo](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/mux-video.md): Video element for Mux-hosted HLS streams - [NativeHlsVideo](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/native-hls-video.md): HLS video element using the browser's built-in HLS support - [ShakaVideo](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/shaka-video.md): Video element powered by Shaka Player for DASH, HLS, and progressive playback with DRM - [SpotifyAudio](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/spotify-audio.md): Audio component that plays Spotify tracks, episodes, playlists, and shows through the Spotify embed - [TikTokVideo](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/tiktok-video.md): Video component that plays TikTok videos through the TikTok embed player - [TwitchVideo](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/twitch-video.md): Video component that plays Twitch videos and live channels through the Twitch embed player - [Video](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/video.md): Native video playback that can provide media to a Video.js player - [VimeoVideo](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/vimeo-video.md): Video component that plays Vimeo videos and live events through the Vimeo player - [WistiaVideo](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/wistia-video.md): Video component that plays Wistia-hosted videos through Wistia's web component - [YouTubeVideo](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/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-2635--vjs10-site.netlify.app/docs/framework/react/reference/google-cast.md): Options for the Google Cast extension that configures the receiver and load request - [MuxData](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/mux-data.md): Options for the Mux Data extension that monitors playback quality ## Helpers Reference for player features and lower-level tools used to build or extend a player. ### Player Features API reference for the feature modules passed to createPlayer, which provide player capabilities and state. - [createSelector](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/create-selector.md): Create a type-safe selector for a store slice's state - [Buffer](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-buffer.md): Buffered and seekable time range state for the player store - [Controls](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-controls.md): User activity and controls visibility state for the player store - [Error](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-error.md): Media error state and actions for the player store - [Fullscreen](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-fullscreen.md): Fullscreen state and actions for the player store - [Live](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-live.md): Live edge state for the player store - [Metadata](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-metadata.md): Resolved title and poster values for the player store - [Orientation lock](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-orientation-lock.md): Screen orientation locking while fullscreen is active - [Picture-in-picture](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-pip.md): Picture-in-picture state and actions for the player store - [Playback](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-playback.md): Play/pause state and actions for the player store - [Playback rate](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-playback-rate.md): Playback speed state and actions for the player store - [Quality](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-quality.md): Video rendition state and actions for the player store - [Audio track](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-audio-track.md): Audio track state and actions for the player store - [Remote Playback](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-remote-playback.md): Remote playback state and actions for the player store - [Source](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-source.md): Media source state and actions for the player store - [Stream type](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-stream-type.md): Stream delivery type (live / on-demand) state for the player store - [Text tracks](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-text-tracks.md): Subtitles, captions, and chapter track state for the player store - [Time](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/feature-time.md): Playback position and duration state for the player store - [Volume](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/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](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/create-player.md): Factory function that creates a typed Player component and hooks - [usePlayer](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-player.md): Hook to access the player store from within a Player - [useMedia](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-media.md): Hook to access the media object from within a Player - [useContainer](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-container.md): Hook to access the media container from the nearest Player - [useStore](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-store.md): Hook to access store state and actions with optional selector-based subscriptions - [createI18n](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/create-i18n.md): Factory that creates framework i18n helpers with custom loading options - [useTranslator](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-translator.md): React hook that returns the typed translator for the nearest I18nProvider - [useLocale](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-locale.md): React hook that returns the active BCP 47 locale from the nearest I18nProvider #### Advanced Lower-level translation, player context, lifecycle, attachment, and state tools. - [Translation phrases](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/translation-phrases.md): Semantic i18n keys, their English defaults, and the player UI that uses them - [registerI18n](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/register-i18n.md): Register or merge translation strings for a BCP 47 locale tag in the global i18n registry - [getI18nTranslations](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/get-i18n-translations.md): Read the merged translation map for a locale using BCP 47 parent-chain fallback - [hasRegisteredLocale](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/has-registered-locale.md): Check whether an exact locale tag exists in the global i18n registry - [onI18nRegistryChange](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/on-i18n-registry-change.md): Subscribe to global i18n registry mutations - [createTranslator](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/create-translator.md): Build a typed translator from a resolved translation map - [I18nContext](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/i-18-n-context.md): React context carrying the active translator and locale - [mergeProps](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/merge-props.md): Utility for combining React props with predictable handler, class, and style precedence - [renderElement](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/render-element.md): Utility for rendering UI component elements with state-driven props and render prop support - [useAttachMedia](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-attach-media.md): Hook that attaches an HTML media element to a playback adapter - [useAudioTrackOptions](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-audio-track-options.md): Hook to build audio track menu options from the player audio track state - [useButton](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-button.md): Hook for creating accessible button components with keyboard and pointer interaction - [useCaptionsOptions](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-captions-options.md): Hook to build captions menu options from the player text track state - [useComposedRefs](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-composed-refs.md): Hook that updates multiple React refs through one stable callback ref - [useContainerAttach](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-container-attach.md): Hook to register a custom container element with the player context - [useDestroy](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-destroy.md): Hook that destroys an imperative instance after a real React unmount - [useDialogContext](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-dialog-context.md): Hook to access the nearest dialog compound-component context - [useDoubleTapGesture](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-double-tap-gesture.md): Hook that registers a double-tap gesture for the current Player - [useErrorDialogContext](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-error-dialog-context.md): Hook to access the nearest ErrorDialog compound-component context - [useHotkey](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-hotkey.md): Hook that registers a keyboard shortcut for the current Player - [useHotkeyShortcut](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-hotkey-shortcut.md): Hook that reads display and ARIA metadata for a registered Player hotkey - [useLatestRef](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-latest-ref.md): Hook that exposes the latest rendered value through a stable ref - [useMediaAttach](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-media-attach.md): Hook to register a custom media element with the player context - [useMediaExtension](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-media-extension.md): Hook for registering a custom extension with the current Player media adapter - [useMediaInstance](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-media-instance.md): Hook that owns a media instance within the current Player - [useMenuContext](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-menu-context.md): Hook to access the nearest Menu compound-component context - [useOptionalContainer](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-optional-container.md): Hook to access a Player container when one is available - [useOptionalMenuContext](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-optional-menu-context.md): Hook to access a Menu context when one is available - [useOptionalPlayer](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-optional-player.md): Hook to access or select Player state when a Player is available - [usePlaybackRateOptions](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-playback-rate-options.md): Hook to build playback rate menu options from the player playback rate state - [usePlayerContext](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-player-context.md): Hook to access the full player context value - [usePopoverContext](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-popover-context.md): Hook to access the nearest Popover compound-component context - [useQualityOptions](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-quality-options.md): Hook to build video quality menu options from the player rendition state - [useSelector](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-selector.md): Low-level hook for subscribing to derived state with customizable equality checks - [useSlider](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-slider.md): Hook for connecting slider input behavior to custom React elements - [useSnapshot](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-snapshot.md): Hook to subscribe to a State container's current value - [useTapGesture](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-tap-gesture.md): Hook that registers a tap gesture for the current Player - [useTooltipContext](https://deploy-preview-2635--vjs10-site.netlify.app/docs/framework/react/reference/use-tooltip-context.md): Hook to access the nearest Tooltip compound-component context --- All documentation: https://deploy-preview-2635--vjs10-site.netlify.app/llms.txt