Presets

Feature collections that configure your player for specific use cases

Presets are collections of features that configure your player for a specific use case. Pick a preset, and you get the right features without wrangling configuration.

The easiest way to use presets in HTML is through pre-built elements . The use case becomes the element name: <website-video-player> is a player with the website preset pre-configured.

For custom configurations, use createPlayer() to define your own player elements:

import { createPlayer, presets } from '@videojs/html';

const { PlayerElement } = createPlayer(presets.website());

PlayerElement.define('my-video-player');

In React, presets are configuration passed to createPlayer(). This gives you the same feature set while following React’s composition patterns.

Using a Preset

import { createPlayer, presets, FrostedSkin, Video } from '@videojs/react';
import '@videojs/react/skins/frosted.css';

// Create a player with the website preset
const { Provider } = createPlayer(presets.website());

<Provider>
  <FrostedSkin>
    <Video src="video.mp4" />
  </FrostedSkin>
</Provider>

The website preset is the most common—a complete set of features for simple video playback on your site.

Available Presets

Player Element	Use Case	Features
`<website-video-player>`	Default website player	playback, volume, time, fullscreen, keyboard, idle
`<background-video-player>`	Background/hero video	playback (autoplay, loop)
`<news-video-player>`	Article embeds	website + ads, playlist
`<creator-video-player>`	Creator platforms	website + quality, chapters
`<swipe-video-player>`	Short-form video	playback, gestures
`<streaming-app-video-player>`	Streaming apps	website + quality, chapters, preferences
`<interactive-live-video-player>`	Interactive live	website + live, chat integration

Preset	Use Case	Features
`presets.website()`	Default website player	playback, volume, time, fullscreen, keyboard, idle
`presets.background()`	Background/hero video	playback (autoplay, loop)
`presets.news()`	Article embeds	website + ads, playlist
`presets.creator()`	Creator platforms	website + quality, chapters
`presets.swipe()`	Short-form video	playback, gestures
`presets.streamingApp()`	Streaming apps	website + quality, chapters, preferences
`presets.interactiveLive()`	Interactive live	website + live, chat integration

Features

Features are the building blocks of presets. Each feature bundles related state and requests —similar to slices in Redux or Zustand.

Feature	State	Requests
`playback`	`paused`, `ended`	`play()`, `pause()`, `togglePlay()`
`volume`	`volume`, `muted`	`setVolume()`, `toggleMute()`
`time`	`currentTime`, `duration`, `seeking`	`seek()`
`fullscreen`	`isFullscreen`	`enterFullscreen()`, `exitFullscreen()`, `toggleFullscreen()`
`keyboard`	—	Keyboard shortcuts (Space → play/pause, arrows → seek)
`idle`	`isIdle`	Tracks user activity for auto-hide UI
`gestures`	—	Touch gestures (double-tap seek, swipe volume)

Extending a Preset

Add features to an existing preset:

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

const { Provider, usePlayer } = createPlayer([
  ...presets.website(),
  features.gestures,
]);

The pre-built elements like <website-video-player> can’t be extended directly. To add features, use createPlayer() to create a new player element:

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

const { PlayerElement } = createPlayer([
  ...presets.website(),
  features.gestures,
]);

// Register your custom player as a web component
PlayerElement.define('website-gesture-video-player');

The PlayerElement.define() method registers your custom player as a web component. Follow the naming convention: {usecase}-{variant}-{mediatype}-player.

Custom Features

For advanced use cases, you can create your own features:

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

const analytics = createFeature({
  initialState: { events: [] },

  subscribe: ({ target, update, signal }) => {
    // Track play/pause events
    target.media.element.addEventListener('play', () => {
      console.log('Video started');
      update();
    }, { signal });
  },

  request: {
    trackEvent: (eventName, { target }) => {
      console.log('Custom event:', eventName);
    },
  },
});

const { Provider, usePlayer } = createPlayer([
  ...presets.website(),
  analytics,
]);

import { createPlayer, createFeature, presets } from '@videojs/html';

const analytics = createFeature({
  initialState: { events: [] },

  subscribe: ({ target, update, signal }) => {
    target.media.element.addEventListener('play', () => {
      console.log('Video started');
      update();
    }, { signal });
  },

  request: {
    trackEvent: (eventName, { target }) => {
      console.log('Custom event:', eventName);
    },
  },
});

const { PlayerElement } = createPlayer([
  ...presets.website(),
  analytics,
]);

PlayerElement.define('website-analytics-video-player');

Presets and Skins

Presets define what features are available . Skins define what UI exists . They’re designed to work together:

The presets.website() preset pairs with <FrostedSkin> and <MinimalSkin>
The presets.streamingApp() preset pairs with <StreamingSkin> (planned)
Using a skin with a preset it wasn’t designed for won’t show new UI—the skin only includes components for its intended features