FrameworkStyle

createPlayer

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

Import 

import { createPlayer, features } from '@videojs/react';

Usage

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 a Provider, Container, a scoped usePlayer hook, and a useMedia hook. 

import { createPlayer, features, Video, PlayButton } from '@videojs/react';

const { Provider, Container, usePlayer, useMedia } = createPlayer({
  features: features.video,
});

function Player() {
  return (
    <Provider>
      <Container>
        <Video src="https://example.com/video.mp4" autoPlay muted playsInline />
        <PlayButton />
      </Container>
    </Provider>
  );
}

The returned usePlayer hook is typed to the store created from the provided features, giving you full type safety for state selectors and actions.

Examples

Basic Usage 

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

import './BasicUsage.css';

const Player = createPlayer({ features: [...features.video] });

function Controls() {
  const store = Player.usePlayer();
  const paused = Player.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 (
    <Player.Provider>
      <Player.Container className="react-create-player-basic">
        <Video
          src="https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4/highest.mp4"
          autoPlay
          muted
          playsInline
        />
        <Controls />
      </Player.Container>
    </Player.Provider>
  );
}

API Reference

Overload 1

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

Parameters

Parameter Type Default
config* CreatePlayerConfig<VideoFeatures> —

Return Value

Property Type
Provider React.FC<ProviderProps>
Container React.ForwardRefExoticComponent<ContainerProps & RefAttributes<HTMLDivElement>>
usePlayer UsePlayerHook<VideoPlayerStore>
useMedia null) | function

Overload 2

Parameters

Parameter Type Default
config* CreatePlayerConfig<AudioFeatures> —

Return Value

Property Type
Provider React.FC<ProviderProps>
Container React.ForwardRefExoticComponent<ContainerProps & RefAttributes<HTMLDivElement>>
usePlayer UsePlayerHook<AudioPlayerStore>
useMedia null) | function

Overload 3

Parameters

Parameter Type Default
config* CreatePlayerConfig<AnyPlayerFeature[]> —

Return Value

Property Type
Provider React.FC<ProviderProps>
Container React.ForwardRefExoticComponent<ContainerProps & RefAttributes<HTMLDivElement>>
usePlayer UsePlayerHook<PlayerStore<AnyPlayerFeature[]>>
useMedia null) | function
VideoJS