createPlayer

Factory function that creates a player instance with typed store, Provider component, Container, and hooks

createPlayer is the entry point for setting up a Video.js player in React. It accepts a configuration object with a features array and returns hooks and components for building a player.

The hook is typed according to the provided features, giving you full type safety for state selectors and actions.

Examples

Basic Usage

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

import './BasicUsage.css';

const { Provider, Container, usePlayer } = createPlayer({
  features: videoFeatures,
});

function Controls() {
  const store = usePlayer();
  const paused = usePlayer((s) => s.paused);

  return (
    <div className="react-create-player-basic__controls">
      <button
        type="button"
        className="react-create-player-basic__button"
        onClick={() => (paused ? store.play() : store.pause())}
      >
        {paused ? 'Play' : 'Pause'}
      </button>
    </div>
  );
}

export default function BasicUsage() {
  return (
    <Provider>
      <Container className="react-create-player-basic">
        <Video
          src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4"
          autoPlay
          muted
          playsInline
        />
        <Controls />
      </Container>
    </Provider>
  );
}

.react-create-player-basic {
  position: relative;
}

.react-create-player-basic video {
  width: 100%;
}

.react-create-player-basic__controls {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.react-create-player-basic__button {
  padding-block: 8px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  color: black;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  padding-inline: 20px;
  cursor: pointer;
}

API Reference

Video

Create a player instance with typed store, Provider component, Container, and hooks.

Parameters

Parameter	Type	Default
`config*`	`CreatePlayerConfig<VideoFeatures>`	`—`
Description Player configuration with features and optional display name.

Return Value

Property	Type
`Provider`	`React.FC<ProviderProps>`
`Container`	`React.ForwardRefExoticComponent<ContainerProps & RefAttributes<HTMLDivElement>>`
`usePlayer`	`UsePlayerHook<VideoPlayerStore>`
`useMedia`	`function`
Type `(() => any)`

Audio

Create a player for audio media.

Parameters

Parameter	Type	Default
`config*`	`CreatePlayerConfig<AudioFeatures>`	`—`
Description Player configuration with features and optional display name.

Return Value

Property	Type
`Provider`	`React.FC<ProviderProps>`
`Container`	`React.ForwardRefExoticComponent<ContainerProps & RefAttributes<HTMLDivElement>>`
`usePlayer`	`UsePlayerHook<AudioPlayerStore>`
`useMedia`	`function`
Type `(() => any)`

Generic

Create a player with custom features.

Parameters

Parameter	Type	Default
`config*`	`CreatePlayerConfig<AnyPlayerFeature[]>`	`—`
Description Player configuration with features and optional display name.

Return Value

Property	Type
`Provider`	`React.FC<ProviderProps>`
`Container`	`React.ForwardRefExoticComponent<ContainerProps & RefAttributes<HTMLDivElement>>`
`usePlayer`	`UsePlayerHook<PlayerStore<AnyPlayerFeature[]>>`
`useMedia`	`function`
Type `(() => any)`