Skip to main content
A preset packages everything you need for a specific player use case. It bundles feature state management, one or more skins for UI, and a default media element. Instead of assembling these pieces individually, you pick a preset that matches what you’re building. For example, the /background preset includes a media element with autoplay, mute, and loop built in, and a skin with no controls.
backgroundFeatures is currently an empty array [] in beta. The background preset is a work-in-progress — use createPlayer({ features: [] }) and add the features you need manually.
import { createPlayer } from '@videojs/react';
import { backgroundFeatures, BackgroundVideo, BackgroundVideoSkin } from '@videojs/react/background';

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

function Hero() {
  return (
    <Player.Provider>
      <BackgroundVideoSkin>
        <BackgroundVideo src="hero.mp4" />
      </BackgroundVideoSkin>
    </Player.Provider>
  );
}

​
Available presets

The default presets are /video and /audio. These cover the baseline controls you’d expect from the HTML <video> and <audio> tags. Beyond the defaults, presets target more specific use cases. Over time, more will be added: short-form players, podcast players, TV streaming players, and others.
PresetFeature bundleSkinsDefault media element
/videovideoFeatures<VideoSkin>, <MinimalVideoSkin><Video>
/audioaudioFeatures<AudioSkin>, <MinimalAudioSkin><Audio>
/backgroundbackgroundFeatures<BackgroundVideoSkin><BackgroundVideo>

​
What’s in a preset

Each preset exports up to three things:

Feature bundle

An array of features that define the player’s state and actions. For example, the video feature bundle includes playback, volume, time, fullscreen, and more.

Skins

Pre-built UIs designed for that feature bundle. A video skin renders fullscreen and PiP controls because the video feature bundle includes those features. An audio skin doesn’t.

Media element

A media component suited to the use case. For example, the background video element bakes in autoplay, mute, and loop.
Skins depend tightly on their feature bundle — a skin expects specific features to exist. Media elements are more interchangeable — you can swap in an HLS or DASH provider without changing your skin or features.

​
Customizing a preset

You can customize a preset in three ways: extend its feature bundle, eject its skin, or swap its media element.

​
Extend the feature bundle

Add features to a preset’s feature bundle to enable new functionality. For example, adding playback controls to a background video: 
import { createPlayer, playback } from '@videojs/react';
import { backgroundFeatures, BackgroundVideo } from '@videojs/react/background';

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

function Hero() {
  return (
    <Player.Provider>
      <Player.Container>
        <BackgroundVideo src="hero.mp4" />
        <PlayButton />
      </Player.Container>
    </Player.Provider>
  );
}

​
Eject the skin

If a preset’s skin is close but not quite right, you can eject it — copy its internal components into your project and customize from there. See UI components for the building blocks available.

​
Swap the media element

A preset’s default media element is just the starting point. You can replace it with any compatible media provider. For example, using an HLS source with the video preset: 
<Player.Provider>
  <VideoSkin>
    <HlsVideo src="https://example.com/stream.m3u8" />
  </VideoSkin>
</Player.Provider>

Build docs developers (and LLMs) love

Get started for freeTalk to us