Skip to content
FrameworkStyle

QualityRadioGroup

A menu radio group for selecting video quality

Creates radio items from the player video rendition state and selects automatic or manual quality.

Anatomy

<QualityRadioGroup
  renderItem={(props, item) => (
    <Menu.RadioItem {...props}>
      {item.label}
      <Menu.ItemIndicator checked={item.checked} />
    </Menu.RadioItem>
  )}
/>

Behavior

The group is available when the configured media exposes more than one video rendition. The first generated option is Auto; selecting it returns control to adaptive bitrate selection. Pass formatRendition to customize visible rendition labels.

QualityRadioGroup uses useQualityOptions to own selection and generate each item. Its required renderItem callback renders the Menu.RadioItem root and receives item state containing the translated label, optional tier and badge, and current checked value. It returns null when the quality feature is not configured.

Styling

Attribute Values Description
data-quality string Current quality value.
data-disabled Present / absent Present when quality selection is disabled.
data-hidden Present / absent Present when multiple renditions are unavailable.
data-availability "available" / "unavailable" Whether multiple renditions are available.

Unavailable groups receive the native hidden attribute.

Accessibility

The group uses the menu radio group pattern.

The component receives an accessible label from the label prop or defaults to Quality. Override it with aria-label or aria-labelledby.

Examples

Basic usage

import { Container, createPlayer, Menu, QualityRadioGroup } from '@videojs/react';
import { HlsJsVideo } from '@videojs/react/media/hlsjs-video';
import { videoFeatures } from '@videojs/react/video';
import type { ReactNode } from 'react';

const { Player } = createPlayer({ features: videoFeatures });
const src = 'https://stream.mux.com/lhnU49l1VGi3zrTAZhDm9LUUxSjpaPW9BL4jY25Kwo4.m3u8';

function QualityMenu(): ReactNode {
  return (
    <Menu.Root side="top" align="end">
      <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
        Quality
      </Menu.Trigger>
      <Menu.Content className="menu">
        <QualityRadioGroup
          className="menu-group"
          renderItem={(props, item) => (
            <Menu.RadioItem {...props} className="menu-item">
              <span>
                {item.label}
                {item.tier ? <sup className="menu-tier">{item.tier}</sup> : null}
              </span>
              {item.badge ? <span className="menu-badge">{item.badge}</span> : null}
              <Menu.ItemIndicator checked={item.checked} forceMount className="menu-indicator">
                ✓
              </Menu.ItemIndicator>
            </Menu.RadioItem>
          )}
        />
      </Menu.Content>
    </Menu.Root>
  );
}

export default function BasicUsage() {
  return (
    <Player>
      <Container className="media-container">
        <HlsJsVideo src={src} autoPlay crossOrigin="anonymous" muted playsInline loop />
        <div className="menu-bar">
          <QualityMenu />
        </div>
      </Container>
    </Player>
  );
}

API Reference

Props

PropTypeDefaultDetails
disabledbooleanfalse
formatRenditionText) | functionformatRenditionLabel
labelText | string | Text) | function''

State

State is accessible via the render, className, and style props.

PropertyTypeDetails
valuestring
optionsQualityRadioGroupOption[]
disabledboolean
hiddenboolean
availability'available' | 'unavailable'
labelText | string

Data attributes

AttributeTypeDetails
data-qualitystring
data-disabled
data-hidden
data-availability'available' | 'unavailable'