Skip to main content
createPlayer is the entry point for setting up a Video.js player in React. Pass a features array and receive a set of React components and hooks that are fully typed to those features. 
import { createPlayer } from '@videojs/react';
import { videoFeatures } from '@videojs/react/video';

const Player = createPlayer({ features: videoFeatures });
// Player.Provider, Player.Container, Player.usePlayer, Player.useMedia
The returned hooks are typed according to the features you provide, giving you full type safety for state selectors and actions.

​
Overloads

import { createPlayer } from '@videojs/react';
import { videoFeatures } from '@videojs/react/video';

const Player = createPlayer({ features: videoFeatures });
// Returns CreatePlayerResult<VideoPlayerStore>

​
Parameters

​
config
CreatePlayerConfig
required
Configuration object for the player.

​
Return value

Returns a CreatePlayerResult object containing components and hooks typed to the features you passed.
​
Provider
FC<ProviderProps>
React component that creates a player store and makes it available to all descendants via context. Every player needs exactly one Provider. It renders no visible element — it is a pure state boundary.
<Player.Provider>
  {/* all player components go here */}
</Player.Provider>
​
Container
ForwardRefExoticComponent<ContainerProps>
The player root element. Wraps your media element and controls. Attaches the store to the DOM subtree when a media element is registered, enabling fullscreen and other container-scoped features.
<Player.Container className="my-player">
  <video src="video.mp4" />
  <Controls />
</Player.Container>
Accepts all standard HTMLDivElement attributes via ContainerProps extends HTMLAttributes<HTMLDivElement>.
​
usePlayer
UsePlayerHook<Store>
Typed hook for accessing the player store. See usePlayer for full documentation.Without a selector, returns the store instance (no subscription). With a selector, subscribes to derived state and re-renders on changes.
​
useMedia
() => Media | null
Hook that returns the current HTMLMediaElement registered with the player, or null if no media element has mounted yet. See useMedia for full documentation.

​
Basic usage

import { createPlayer } from '@videojs/react';
import { videoFeatures } from '@videojs/react/video';

const Player = createPlayer({ features: videoFeatures });

function App() {
  return (
    <Player.Provider>
      <Player.Container style={{ width: 640, aspectRatio: '16/9' }}>
        <video src="https://example.com/video.mp4" autoPlay muted playsInline loop />
      </Player.Container>
    </Player.Provider>
  );
}

​
Extended layout

The Provider scope can extend beyond the fullscreen target. Components outside Container still have full store access but won’t enter fullscreen with the video. 
<Player.Provider>
  <Player.Container>
    <video src="video.mp4" />
    <Controls />
  </Player.Container>

  {/* Outside container — still has store access */}
  <Transcript />
  <PlaylistSidebar />
</Player.Provider>

​
TypeScript types

import type { CreatePlayerConfig, CreatePlayerResult, ProviderProps } from '@videojs/react';
TypeDescription
CreatePlayerConfig<Features>Input config accepted by createPlayer.
CreatePlayerResult<Store>The object returned by createPlayer.
ProviderPropsProps accepted by the Provider component.
UsePlayerHook<Store>The typed usePlayer hook signature.

Build docs developers (and LLMs) love

Get started for freeTalk to us