Skip to content
FrameworkStyle

createPlayer

Factory function that creates a typed Player component and hooks

Import

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

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.

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

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

// Container is imported independently from createPlayer.

Examples

Basic Usage

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

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

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

  return (
    <div className="controls">
      <button type="button" className="button" onClick={() => (paused ? store.play() : store.pause())}>
        {paused ? 'Play' : 'Pause'}
      </button>
    </div>
  );
}

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

API Reference

Video

Create a player instance with a typed Player component and hooks.

Parameters

ParameterTypeDefaultDetails
config*object—

Return Value

PropertyTypeDetails
PlayerFC<PlayerProps<InferPlayerConfig<VideoPlayerStore>>>
usePlayerfunction
useMedianull) | function

Audio

Create a player for audio media.

Parameters

ParameterTypeDefaultDetails
config*object—

Return Value

PropertyTypeDetails
PlayerFC<PlayerProps<InferPlayerConfig<AudioPlayerStore>>>
usePlayerfunction
useMedianull) | function

Generic

Create a player with custom features.

Parameters

ParameterTypeDefaultDetails
config*object—

Return Value

PropertyTypeDetails
PlayerFC<PlayerProps<InferPlayerConfig<PlayerStore<Features>>>>
usePlayerfunction
useMedianull) | function