Skip to content
FrameworkStyle

useQualityOptions

Hook to build video quality menu options from the player rendition state

useQualityOptions returns the current quality value, the available options, and a setValue callback for wiring quality selection into a menu. It returns null when the quality feature is not configured.

import { Menu, useQualityOptions } from "@videojs/react";

function QualityMenu() {
  const quality = useQualityOptions();
  if (quality?.state.availability !== "available") return null;

  return (
    <Menu.RadioGroup value={quality.value} onValueChange={quality.setValue} aria-label="Quality">
      {quality.options.map((option) => (
        <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled}>
          {option.label}
          <Menu.ItemIndicator checked={option.value === quality.value} />
        </Menu.RadioItem>
      ))}
    </Menu.RadioGroup>
  );
}

The first option is always Auto; selecting it returns control to adaptive bitrate selection. Options carry optional tier and badge fields (e.g. 4K, HD) for richer labels. Pass formatRendition to customize the visible rendition labels.

See QualityRadioGroup for the component-level pattern, and Menu for a complete settings menu example.

API Reference

Parameters

ParameterTypeDefaultDetails
propsQualityOptionsProps—

Return Value

QualityOptionsResult | null