Features

Not every player needs to support every use case. To address this, Video.js has a concept of features — self-contained units of player functionality. Each feature adds state properties and actions to the player. For example, playback adds paused and play(), volume adds volume and setVolume(), and so on.

Using features

Feature bundles and presets

You probably don’t want to hand-pick every feature your player needs. A feature bundle groups the features needed for a specific use case into a single array.

React
HTML

videoFeatures bundles playback, volume, time, fullscreen, and more — everything a general video player needs:

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

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

If you import <video-player> from the /video path, playback, volume, time, fullscreen, and more are already enabled:

<script type="module" src="@videojs/html/video/player"></script>
<video-player>
  <video-skin>
    <video slot="media" src="movie.mp4"></video>
  </video-skin>
</video-player>

Feature bundles are usually paired with specific skins and media elements in a preset. See Presets to learn more.

Create a player with individual features

If you’re not using presets, you can create a player with individual features:

React
HTML

import { createPlayer, playback, volume, time } from '@videojs/react';

const Player = createPlayer({
  features: [playback, volume, time],
});

import { createPlayer, playback, volume, time } from '@videojs/html';

const { ProviderMixin, PlayerController, context } = createPlayer({
  features: [playback, volume, time],
});

class MyPlayer extends ProviderMixin(MediaElement) {
  static readonly tagName = 'my-player';
}

customElements.define('my-player', MyPlayer);

Extending a feature bundle

Feature bundles are just arrays of features, so extending one is straightforward. For example, if you’re using the /background preset and want a play button on your background video, add the playback feature:

React
HTML

import { createPlayer, playback } from '@videojs/react';
import { backgroundFeatures } from '@videojs/react/background';

const Player = createPlayer({
  features: [...backgroundFeatures, playback],
});

import { createPlayer, playback } from '@videojs/html';
import { backgroundFeatures } from '@videojs/html/background';
import { MediaElement } from '@videojs/html';

const { ProviderMixin } = createPlayer({
  features: [...backgroundFeatures, playback],
});

class MyPlayer extends ProviderMixin(MediaElement) {
  static readonly tagName = 'my-player';
}

customElements.define('my-player', MyPlayer);

Access features in components

React
HTML

Access feature state and actions through usePlayer:

// Subscribe to state (re-renders when selected values change)
const { paused, volume } = usePlayer((s) => ({
  paused: s.paused,
  volume: s.volume,
}));

// Call actions
const store = usePlayer();
store.play();
store.setVolume(0.8);

Each feature also has a pre-built selector (e.g. selectPlayback, selectVolume) that returns just that feature’s state and actions:

import { selectPlayback, usePlayer } from '@videojs/react';

const playback = usePlayer(selectPlayback);
playback?.play();

Access feature state and actions through PlayerController and pre-built feature selectors (e.g. selectPlayback, selectVolume):

import { selectPlayback } from '@videojs/html';

// Subscribe to feature state (triggers element updates on change)
readonly #playback = new PlayerController(this, context, selectPlayback);

// Read state and call actions
const media = this.#playback.value;
if (media?.paused) media.play();

Feature availability

Volume, fullscreen, and picture-in-picture expose an *Availability property because platform support varies. For example, iOS Safari doesn’t allow programmatic volume control.

Value	Meaning
`'available'`	Ready to use
`'unavailable'`	Could work, not ready yet
`'unsupported'`	Platform can never do this

Components that depend on availability (like PiPButton and FullscreenButton) expose a data-availability attribute, so you can hide unsupported controls with CSS:

React
HTML

.pip-button[data-availability="unsupported"] {
  display: none;
}

You can also check availability in JavaScript:

function PiPControl() {
  const availability = usePlayer((s) => s.pipAvailability);

  if (availability === 'unsupported') return null;

  return <PiPButton />;
}

media-pip-button[data-availability="unsupported"] {
  display: none;
}

You can also check availability in JavaScript:

const media = this.#pip.value;

if (media?.availability === 'unsupported') {
  this.hidden = true;
}

Available features

playback

paused state and play() / pause() actions. The foundation of any player.

volume

volume (0–1) and muted state, setVolume() and toggleMuted() actions. Includes volumeAvailability.

time

currentTime and duration state, seek() action.

fullscreen

fullscreen state and requestFullscreen() / exitFullscreen() actions. Includes fullscreenAvailability.

pip

Picture-in-picture state and requestPictureInPicture() / exitPictureInPicture() actions. Includes pipAvailability.

textTrack

Subtitle, caption, chapter, and thumbnail track state. toggleSubtitles() action.

playbackRate

playbackRate state and setPlaybackRate() action.

controls

Tracks user activity to show or hide controls.

source

Media source state for the current loaded source.

error

error state and dismissError() action for media errors.

buffer

buffering state and buffer progress.

Get Started

Core Concepts

Guides

Packages

Using features

Feature bundles and presets

Create a player with individual features

Extending a feature bundle

Access features in components

Feature availability

Available features

playback

volume

time

fullscreen

pip

textTrack

playbackRate

controls

source

error

buffer

Build docs developers (and LLMs) love

Get Started

Core Concepts

Guides

Packages

​Using features

​Feature bundles and presets

​Create a player with individual features

​Extending a feature bundle

​Access features in components

​Feature availability

​Available features

playback

volume

time

fullscreen

pip

textTrack

playbackRate

controls

source

error

buffer

Build docs developers (and LLMs) love

Using features

Feature bundles and presets

Create a player with individual features

Extending a feature bundle

Access features in components

Feature availability

Available features