Skip to content

ReferenceFeatures

Quality

Video rendition state and actions for the player store

Tracks video renditions and selects a manual rendition or automatic adaptive bitrate.

Import

import { qualityFeature } from '@videojs/react';

The videoFeatures feature bundle includes this feature.

API Reference

State

PropertyTypeDetails
videoRenditionListMediaVideoRendition[]
activeVideoRendition{ id?: string; width?: number; height?: number; bitrate?: number; frameRate?: number; codec?: string; selected: boolean } | null

Actions

ActionTypeDetails
selectVideoRenditionfunction

Selector

Pass selectQuality to usePlayer to subscribe to quality state. Returns undefined if the quality feature is not configured.

import { selectQuality, usePlayer } from '@videojs/react';

function QualityInfo() {
  const quality = usePlayer(selectQuality);
  if (!quality) return null;

  return <span>{quality.videoRenditionList.length} renditions</span>;
}