# createPlayer

Factory function that creates a typed Player component and hooks

## Import

```tsx
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.

```tsx
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

**App.tsx**

```tsx
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>
  );
}
```

**App.css**

```css
.media-container {
  position: relative;
}

.media-container video {
  width: 100%;
}

.controls {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

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

## API Reference

### Video

`createPlayer(config): CreatePlayerResult<VideoPlayerStore>`

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

#### Parameters

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `config` (required) | `{ features: [PlayerFeature<MediaPlaybackState>, PlayerFeature<MediaPlaybackRateState>, PlayerFeature<MediaQualityState>, PlayerFeature<MediaAudioTrackState>, PlayerFeature<MediaVolumeState>, PlayerFeature<MediaTimeState>, PlayerFeature<MediaSourceState>, PlayerFeature<MediaBufferState>, PlayerFeature<MediaFullscreenState>, PlayerFeature<MediaPictureInPictureState>, PlayerFeature<MediaRemotePlaybackState>, PlayerFeature<MediaControlsState>, PlayerFeature<MediaTextTrackState>, PlayerFeature<MediaErrorState>, typeof metadataFeature]; displayName?: string }` | — | Player configuration with features and optional display name. |

#### Return Value

| Property | Type | Description |
| --- | --- | --- |
| `Player` | `FC<PlayerProps<InferPlayerConfig<VideoPlayerStore>>>` | Provides a new player store to its descendants without adding a layout element. |
| `usePlayer` | `{ (): VideoPlayerStore; <R>(selector: ((state: VideoPlayerStore['state']) => R)): R }` | Accesses the configured store, or subscribes to a selected value from it. |
| `useMedia` | `(() => Media \| null)` | Returns the media currently attached beneath the generated Player, or `null` before attachment. |

### Audio

`createPlayer(config): CreatePlayerResult<AudioPlayerStore>`

Create a player for audio media.

#### Parameters

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `config` (required) | `{ features: [PlayerFeature<MediaPlaybackState>, PlayerFeature<MediaPlaybackRateState>, PlayerFeature<MediaVolumeState>, PlayerFeature<MediaTimeState>, PlayerFeature<MediaSourceState>, PlayerFeature<MediaBufferState>, PlayerFeature<MediaErrorState>, typeof metadataFeature]; displayName?: string }` | — | Player configuration with features and optional display name. |

#### Return Value

| Property | Type | Description |
| --- | --- | --- |
| `Player` | `FC<PlayerProps<InferPlayerConfig<AudioPlayerStore>>>` | Provides a new player store to its descendants without adding a layout element. |
| `usePlayer` | `{ (): AudioPlayerStore; <R>(selector: ((state: AudioPlayerStore['state']) => R)): R }` | Accesses the configured store, or subscribes to a selected value from it. |
| `useMedia` | `(() => Media \| null)` | Returns the media currently attached beneath the generated Player, or `null` before attachment. |

### Generic

`createPlayer<const Features extends AnyPlayerFeature[]>(config): CreatePlayerResult<PlayerStore<Features>>`

Create a player with custom features.

#### Parameters

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `config` (required) | `{ features: Features; displayName?: string }` | — | Player configuration with features and optional display name. |

#### Return Value

| Property | Type | Description |
| --- | --- | --- |
| `Player` | `FC<PlayerProps<InferPlayerConfig<PlayerStore<Features>>>>` | Provides a new player store to its descendants without adding a layout element. |
| `usePlayer` | `{ (): PlayerStore<Features>; <R>(selector: ((state: PlayerStore<Features>['state']) => R)): R }` | Accesses the configured store, or subscribes to a selected value from it. |
| `useMedia` | `(() => Media \| null)` | Returns the media currently attached beneath the generated Player, or `null` before attachment. |

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt