Skip to content

ReferencePresets

Live video preset

The live video preset — a player, feature bundle, skins, and media for live video streams

@videojs/html/live-video is the preset for live video streams. It bundles the <live-video-player> element, the liveVideoFeatures bundle it is configured with, and two skins that swap the time slider and time displays for a Live button, and plays through the browser’s native <video>. See Presets for how presets fit together and Live streams for playing a live source.

Import

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

Import @videojs/html/live-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/live-video.js"></script>

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

Usage

Live streams are usually HLS, so this example plays through an HLS media component instead of the preset’s native video.

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

<live-video-player>
  <live-video-skin>
    <hlsjs-video src="https://example.com/live.m3u8"></hlsjs-video>
  </live-video-skin>
</live-video-player>

Player

@videojs/html/live-video/player registers <live-video-player>, whose class is LiveVideoPlayerElement. It is a player element created by createPlayer with liveVideoFeatures. 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 live video player’s store. Use it from any custom element inside <live-video-player>; see PlayerController.

Feature bundle

liveVideoFeatures is the array of features the player is configured with. It is the video preset’s videoFeatures without playback rate, quality, and audio-track selection, plus the live feature:

FeatureDescription
playbackFeaturePlay/pause 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
liveFeatureLive edge state for the player store
metadataFeatureResolved title and poster values for the player store

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

import type { LiveVideoFeatures } 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, streamTypeFeature } from '@videojs/html';
import { liveVideoFeatures } from '@videojs/html/live-video';

const { PlayerElement } = createPlayer({
  features: [...liveVideoFeatures, streamTypeFeature],
});

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

Skins

  • LiveVideoSkin — the default skin, which swaps the time controls for a Live button.
  • NeutralLiveVideoSkin — 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. Most browsers need a streaming media component to play a live source, such as <hlsjs-video> for HLS.

Exports

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

Export Description
LiveVideoPlayerElement The player element class.
PlayerController The player controller, bound to the live video player’s store.
liveVideoFeatures The feature bundle.
LiveVideoSkinElement The default skin element class.
NeutralLiveVideoSkinElement The neutral skin element class.

Registration entry points are side-effect-only:

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