Skip to content

ReferencePresets

Video preset

The general-purpose video preset — a player, feature bundle, skins, and media for on-demand video

@videojs/react/video is the general-purpose preset for on-demand video. It bundles VideoPlayer, the videoFeatures bundle it is configured with, two skins, and the Video media component. See Presets for how presets fit together and how to customize one.

Import

import { Video, VideoPlayer, VideoSkin } from '@videojs/react/video';
import '@videojs/react/video/skin.css';

Each skin has its own stylesheet. Import @videojs/react/video/neutral-skin.css instead when you use NeutralVideoSkin.

Usage

import { Video, VideoPlayer, VideoSkin } from '@videojs/react/video';
import '@videojs/react/video/skin.css';

export function App() {
  return (
    <VideoPlayer>
      <VideoSkin>
        <Video src="video.mp4" />
      </VideoSkin>
    </VideoPlayer>
  );
}

Player

VideoPlayer is a Player created by createPlayer with videoFeatures. It provides the player store to its descendants and renders no DOM element of its own.

VideoPlayerProps types its props:

Prop Type Description
children ReactNode Content placed inside the player context: a skin, the media, and your own components.
title string | null The title to display. Takes precedence over the title the media reports; null clears your value, so the title falls back to the one the media reports.
poster string | null The poster to display. Takes precedence over the poster the media reports; null clears your value, so the poster falls back to the one the media reports.

title and poster come from the metadata feature.

The preset also exports a usePlayer hook typed to videoFeatures. Use it from any component inside VideoPlayer; see usePlayer.

Feature bundle

videoFeatures is the array of features the player is configured with:

FeatureDescription
playbackFeaturePlay/pause state and actions for the player store
playbackRateFeaturePlayback speed state and actions for the player store
qualityFeatureVideo rendition state and actions for the player store
audioTrackFeatureAudio track state and actions for the player store
volumeFeatureVolume level and mute state for the player store
timeFeaturePlayback position and duration state for the player store
sourceFeatureMedia source state and actions for the player store
bufferFeatureBuffered and seekable time range state for the player store
fullscreenFeatureFullscreen state and actions for the player store
pipFeaturePicture-in-picture state and actions for the player store
remotePlaybackFeatureRemote playback state and actions for the player store
controlsFeatureUser activity and controls visibility state for the player store
textTrackFeatureSubtitles, captions, and chapter track state for the player store
errorFeatureMedia error state and actions for the player store
metadataFeatureResolved title and poster values for the player store

Its type, VideoFeatures, is the tuple of those features in order. Import it from the package root:

import type { VideoFeatures } from '@videojs/react';

To add or remove a feature, pass your own array to createPlayer. The skins expect the features they render controls for.

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

const { Player, usePlayer } = createPlayer({
  features: [...videoFeatures, orientationLockFeature],
});

Skins

  • VideoSkin — the default skin, with the modern, frosted look.
  • NeutralVideoSkin — the visually lighter variant, closer to a classic control bar.

Media

The preset exports Video, which renders a native <video>. Swap it for any compatible media component, such as HlsJsVideo for HLS.

Exports

@videojs/react/video exports:

Export Description
VideoPlayer, VideoPlayerProps The preconfigured player.
usePlayer The player-store hook, typed to videoFeatures.
videoFeatures The feature bundle.
VideoSkin, VideoSkinProps The default skin.
NeutralVideoSkin, NeutralVideoSkinProps The neutral skin.
Video, VideoProps The media component.

Stylesheets: @videojs/react/video/skin.css and @videojs/react/video/neutral-skin.css.