Skip to content

ReferencePresets

Video preset

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

@videojs/html/video is the general-purpose preset for on-demand video. It bundles the <video-player> element, the videoFeatures bundle it is configured with, and two skins, and plays through the browser’s native <video>. See Presets for how presets fit together and how to customize one.

Import

import '@videojs/html/video/player';
import '@videojs/html/video/skin';

Import @videojs/html/video/neutral-skin instead for the neutral skin. Or load one CDN bundle that registers the player and a skin together:

<script type="module" src="https://cdn.jsdelivr.net/npm/@videojs/cdn@10.0.1/video.js"></script>

video-neutral.js registers the neutral skin instead, and video-player.js registers <video-player> alone.

Usage

<script type="module">
  import '@videojs/html/video/player';
  import '@videojs/html/video/skin';
</script>

<video-player>
  <video-skin>
    <video src="video.mp4"></video>
  </video-skin>
</video-player>

Player

@videojs/html/video/player registers <video-player>, whose class is VideoPlayerElement. It is a player element created by createPlayer with videoFeatures. It owns the player store but no layout. Put a skin or a <media-container> inside it.

Attribute Property Description
content-title contentTitle The title to display. Takes precedence over the title the media reports.
poster poster The poster to display. Takes precedence over the poster the media reports.
keep-alive — Keeps the player and its store alive when the element leaves the DOM. Call destroy() when you’re done with it.

content-title and poster come from the metadata feature. The element’s read-only store property returns its player store.

The preset root also exports a PlayerController bound to the video player’s store. Use it from any custom element inside <video-player>; see PlayerController.

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/html';

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/html';
import { videoFeatures } from '@videojs/html/video';

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

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

Skins

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

Media

The preset plays through a native <video>, so it registers no media component of its own. Swap it for any compatible media component, such as <hlsjs-video> for HLS.

Exports

The preset root, @videojs/html/video, has no side effects. Importing it never registers an element:

Export Description
VideoPlayerElement The player element class.
PlayerController The player controller, bound to the video player’s store.
videoFeatures The feature bundle.
VideoSkinElement The default skin element class.
NeutralVideoSkinElement The neutral skin element class.

Registration entry points are side-effect-only:

Entry point Registers
@videojs/html/video/player <video-player>
@videojs/html/video/skin <video-skin>, <media-container>, and the UI elements the skin composes
@videojs/html/video/neutral-skin <video-neutral-skin>, <media-container>, and the UI elements the neutral skin composes
@videojs/html/video/ui <media-container> and the UI elements of the default skin, without the skin, for a layout you write yourself
@videojs/html/video/neutral-ui <media-container> and the UI elements of the neutral skin, without the skin