Skip to content

ReferencePresets

Live video preset

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

@videojs/react/live-video is the preset for live video streams. It bundles LiveVideoPlayer, the liveVideoFeatures bundle it is configured with, two skins that swap the time slider and time displays for a Live button, and the Video media component. See Presets for how presets fit together and Live streams for playing a live source.

Import

import { LiveVideoPlayer, LiveVideoSkin, Video } from '@videojs/react/live-video';
import '@videojs/react/live-video/skin.css';

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

Usage

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

import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
import { LiveVideoPlayer, LiveVideoSkin } from '@videojs/react/live-video';
import '@videojs/react/live-video/skin.css';

export function App() {
  return (
    <LiveVideoPlayer>
      <LiveVideoSkin>
        <HlsJsVideo src="https://example.com/live.m3u8" />
      </LiveVideoSkin>
    </LiveVideoPlayer>
  );
}

Player

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

LiveVideoPlayerProps 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 liveVideoFeatures. Use it from any component inside LiveVideoPlayer; see usePlayer.

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

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/react';
import { liveVideoFeatures } from '@videojs/react/live-video';

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

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 exports Video, the same component as the video preset, which renders a native <video>. Most browsers need a streaming media component to play a live source, such as HlsJsVideo for HLS.

Exports

@videojs/react/live-video exports:

Export Description
LiveVideoPlayer, LiveVideoPlayerProps The preconfigured player.
usePlayer The player-store hook, typed to liveVideoFeatures.
liveVideoFeatures The feature bundle.
LiveVideoSkin, LiveVideoSkinProps The default skin.
NeutralLiveVideoSkin, NeutralLiveVideoSkinProps The neutral skin.
Video, VideoProps The media component.

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