Skip to content

ReferenceMenu

useQualityOptions

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

Import

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

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. Each QualityOption has a value, a translated label, a disabled flag, and 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

useQualityOptions(props?): QualityOptionsResult | null

Parameters

ParameterTypeDefaultDetails
propsobject—

Return Value

PropertyTypeDetails
stateobject
labelstring
valuestring
selectedLabelstring
optionsQualityOption[]
disabledboolean
hiddenboolean
setValuefunction