# Video.js v10 — React API

> API reference for the player factory, presets, store, features, menus, gestures, translation tools, and utilities. Every page below is also available as Markdown at its `.md` URL. This section in one file (about 56k tokens): https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/llms-full.txt

## Player

API reference for creating a player and reaching it and its container from your own code.

- [createPlayer](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/create-player.md): Factory function that creates a typed Player component and hooks
- [usePlayer](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-player.md): Hook to access the player store from within a Player
- [useOptionalPlayer](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-optional-player.md): Hook to access or select Player state when a Player is available
- [useMedia](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-media.md): Hook to access the media attached to the nearest Player
- [useContainer](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-container.md): Hook to access the media container from the nearest Player
- [useOptionalContainer](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-optional-container.md): Hook to access a Player container when one is available
- [useContainerAttach](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-container-attach.md): Hook to register a custom container element with the player context
- [Media capability guards](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/media-capabilities.md): Type guards that narrow a Media object to the capabilities it supports

## Presets

API reference for the presets: each bundles a player, feature bundle, skins, and media for one use case.

- [Video preset](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/preset-video.md): The general-purpose video preset — a player, feature bundle, skins, and media for on-demand video
- [Audio preset](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/preset-audio.md): The audio-only preset — a player, feature bundle, skins, and media for on-demand audio
- [Live video preset](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/preset-live-video.md): The live video preset — a player, feature bundle, skins, and media for live video streams
- [Live audio preset](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/preset-live-audio.md): The live audio preset — a player, feature bundle, skins, and media for live audio streams
- [Background preset](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/preset-background.md): The background video preset — a player, feature bundle, skin, and media for ambient video with no controls

## Store

API reference for reading and subscribing to player state: selectors, the store hooks, and snapshots.

- [Player store](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/player-store.md): Every state field and action on the player store, grouped by the feature that adds it
- [createSelector](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/create-selector.md): Create a type-safe selector for a store slice's state
- [useStore](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-store.md): Hook to access store state and actions with optional selector-based subscriptions
- [useSelector](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-selector.md): Low-level hook for subscribing to derived state with customizable equality checks
- [useSnapshot](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-snapshot.md): Hook to subscribe to a State container's current value

## Features

API reference for the feature modules passed to createPlayer, which provide player capabilities and state.

- [Buffer](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-buffer.md): Buffered and seekable time range state for the player store
- [Controls](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-controls.md): User activity and controls visibility state for the player store
- [Error](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-error.md): Media error state and actions for the player store
- [Fullscreen](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-fullscreen.md): Fullscreen state and actions for the player store
- [Live](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-live.md): Live edge state for the player store
- [Metadata](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-metadata.md): Resolved title and poster values for the player store
- [Orientation lock](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-orientation-lock.md): Screen orientation locking while fullscreen is active
- [Picture-in-picture](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-pip.md): Picture-in-picture state and actions for the player store
- [Playback](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-playback.md): Play/pause state and actions for the player store
- [Playback rate](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-playback-rate.md): Playback speed state and actions for the player store
- [Quality](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-quality.md): Video rendition state and actions for the player store
- [Audio track](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-audio-track.md): Audio track state and actions for the player store
- [Remote Playback](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-remote-playback.md): Remote playback state and actions for the player store
- [Source](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-source.md): Media source state and actions for the player store
- [Stream type](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-stream-type.md): Stream delivery type (live / on-demand) state for the player store
- [Text tracks](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-text-tracks.md): Subtitles, captions, and chapter track state for the player store
- [Time](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-time.md): Playback position and duration state for the player store
- [Volume](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/feature-volume.md): Volume level and mute state for the player store

## Menu

API reference for the option lists behind the track, quality, and speed menus.

- [useAudioTrackOptions](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-audio-track-options.md): Hook to build audio track menu options from the player audio track state
- [useCaptionsOptions](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-captions-options.md): Hook to build captions menu options from the player text track state
- [usePlaybackRateOptions](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-playback-rate-options.md): Hook to build playback rate menu options from the player playback rate state
- [useQualityOptions](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-quality-options.md): Hook to build video quality menu options from the player rendition state

## Gestures

API reference for tap and double-tap gestures and keyboard hotkeys.

- [useTapGesture](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-tap-gesture.md): Hook that registers a tap gesture for the current Player
- [useDoubleTapGesture](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-double-tap-gesture.md): Hook that registers a double-tap gesture for the current Player
- [useHotkey](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-hotkey.md): Hook that registers a keyboard shortcut for the current Player
- [useHotkeyShortcut](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-hotkey-shortcut.md): Hook that reads display and ARIA metadata for a registered Player hotkey

## i18n

API reference for translating the player: the provider, hooks, and the phrase registry.

- [I18nProvider](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/i18n-provider.md): React provider that resolves locale and supplies a typed translator to descendants
- [createI18n](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/create-i18n.md): Factory that creates framework i18n helpers with custom loading options
- [useTranslator](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-translator.md): React hook that returns the typed translator for the nearest I18nProvider
- [useLocale](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-locale.md): React hook that returns the active BCP 47 locale from the nearest I18nProvider
- [Translation phrases](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/translation-phrases.md): Semantic i18n keys, their English defaults, and the player UI that uses them
- [registerI18n](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/register-i18n.md): Register or merge translation strings for a BCP 47 locale tag in the global i18n registry
- [getI18nTranslations](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/get-i18n-translations.md): Read the merged translation map for a locale using BCP 47 parent-chain fallback
- [hasRegisteredLocale](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/has-registered-locale.md): Check whether an exact locale tag exists in the global i18n registry
- [onI18nRegistryChange](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/on-i18n-registry-change.md): Subscribe to global i18n registry mutations
- [createTranslator](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/create-translator.md): Build a typed translator from a resolved translation map
- [translateText](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/translate-text.md): Translate a text descriptor, or fall back to its English default
- [resolveTranslation](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/resolve-translation.md): Translate a key with the params its English default requires
- [isText](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/is-text.md): Check whether a value is a text descriptor
- [loadLocale](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/load-locale.md): Lazy-load the built-in translation pack for a locale
- [getLocaleKey](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/get-locale-key.md): Normalize a locale tag to the key the i18n registry stores it under
- [findLocaleKeys](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/find-locale-keys.md): List the locale tags a lookup falls back through, most specific first

## Utils

Lower-level building blocks: adapter and MIME type resolution, and refs, buttons, sliders, and rendering for custom components.

- [resolveAdapterType](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/resolve-adapter-type.md): Resolve which type of adapter plays a source URL, from its host, MIME type, or file extension
- [resolveMimeType](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/resolve-mime-type.md): Resolve a source's MIME type from its file extension
- [useButton](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-button.md): Hook for creating accessible button components with keyboard and pointer interaction
- [useSlider](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-slider.md): Hook for connecting slider input behavior to custom React elements
- [useComposedRefs](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-composed-refs.md): Hook that updates multiple React refs through one stable callback ref
- [useLatestRef](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-latest-ref.md): Hook that exposes the latest rendered value through a stable ref
- [useDestroy](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/use-destroy.md): Hook that destroys an imperative instance after a real React unmount
- [mergeProps](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/merge-props.md): Utility for combining React props with predictable handler, class, and style precedence
- [renderElement](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/render-element.md): Utility for rendering UI component elements with state-driven props and render prop support

## Error codes

Reference for codes thrown when Video.js 8 APIs are used with the Video.js 10 package.

- [Error Codes](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/error-codes.md): Error codes emitted by the video.js package and how to resolve them
- [VJS8_LEGACY_INIT](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/vjs8-legacy-init.md): Legacy Video.js 8 player initialization error
- [VJS8_LEGACY_PLUGIN](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/vjs8-legacy-plugin.md): Legacy Video.js 8 plugin registration error
- [VJS8_LEGACY_COMPONENT](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/vjs8-legacy-component.md): Legacy Video.js 8 component registration error
- [VJS8_LEGACY_GET_PLAYER](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/vjs8-legacy-get-player.md): Legacy Video.js 8 player lookup error
- [VJS8_LEGACY_OPTIONS](https://deploy-preview-9398--vjs10-site.netlify.app/docs/framework/react/reference/api/vjs8-legacy-options.md): Legacy Video.js 8 global options error

---

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