media-audio-track-radio-group

A menu radio group for selecting an audio track

Creates radio items from the player audio track state and selects the enabled track.

Anatomy

<media-audio-track-radio-group>
  <template>
    <media-menu-radio-item>
      <span data-part="label"></span>
      <media-menu-item-indicator></media-menu-item-indicator>
    </media-menu-radio-item>
  </template>
</media-audio-track-radio-group>

Behavior

The group is available when the configured media exposes more than one audio track. Labels use the track label, then language, then kind. Pass formatTrack to customize the visible labels.

<media-audio-track-radio-group> generates <media-menu-radio-item> children. Add an optional <template> with a single <media-menu-radio-item> to customize each generated item.

Styling

Attribute	Values	Description
`data-audio-track`	`string`	Current audio track value.
`data-disabled`	Present / absent	Present when audio track selection is disabled.
`data-availability`	`"available"` / `"unavailable"`	Whether multiple audio tracks are available.

media-audio-track-radio-group[data-availability="unavailable"] {
  display: none;
}

Accessibility

The group uses the menu radio group pattern.

The element receives an accessible label from the label property or defaults to Audio.

Examples

Basic usage

import { createPlayer, Menu, useAudioTrackOptions } 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/s41JYeqIpBMBzE4OzxDyGR2yrp2hD1CQ6gJN9SlVGDQ.m3u8';

function AudioMenu(): ReactNode {
  const audioTrack = useAudioTrackOptions();
  if (audioTrack?.state.availability !== 'available') return null;

  return (
    <Menu.Root side="top" align="end">
      <Menu.Trigger className="settings-trigger" render={<button type="button" />}>
        Audio
      </Menu.Trigger>
      <Menu.Content className="menu">
        <Menu.RadioGroup
          className="menu-group"
          value={audioTrack.value}
          onValueChange={audioTrack.setValue}
          aria-label="Audio tracks"
        >
          {audioTrack.options.map((option) => (
            <Menu.RadioItem key={option.value} value={option.value} disabled={option.disabled} className="menu-item">
              {option.label}
              <Menu.ItemIndicator checked={option.value === audioTrack.value} forceMount className="menu-indicator">
                ✓
              </Menu.ItemIndicator>
            </Menu.RadioItem>
          ))}
        </Menu.RadioGroup>
      </Menu.Content>
    </Menu.Root>
  );
}

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

.media-container {
  position: relative;
}

.media-container video {
  width: 100%;
}

.menu-bar {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.settings-trigger {
  padding: 6px 16px;
  color: black;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
}

.menu {
  --media-menu-side-offset: 8px;
  box-sizing: border-box;
  display: grid;
  gap: 2px;
  min-width: 180px;
  max-width: var(--media-menu-available-width, var(--media-popover-available-width, none));
  max-height: var(--media-menu-available-height, var(--media-popover-available-height, none));
  padding: 6px;
  margin: 0;
  overflow: auto;
  overscroll-behavior: none;
  font-size: 14px;
  color: white;
  background: rgba(0, 0, 0, 0.88);
  border: 0;
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.menu-group {
  display: grid;
  gap: 2px;
}

.menu-item {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 0 10px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
}

.menu-item[data-highlighted] {
  background: rgba(255, 255, 255, 0.16);
}

.menu-indicator {
  opacity: 0;
}

[role="menuitemradio"][aria-checked="true"] .menu-indicator {
  opacity: 1;
}

<video-player class="video-player">
    <media-container>
        <hlsjs-video
            class="video-media"
            src="https://stream.mux.com/s41JYeqIpBMBzE4OzxDyGR2yrp2hD1CQ6gJN9SlVGDQ.m3u8"
            autoplay
            crossorigin="anonymous"
            muted
            playsinline
            loop
        ></hlsjs-video>
        <div class="menu-bar">
            <button type="button" commandfor="audio-menu" class="settings-trigger">Audio</button>
            <media-menu id="audio-menu" side="top" align="end" class="menu">
                <media-audio-track-radio-group class="menu-group" label="Audio tracks">
                    <template>
                        <media-menu-radio-item class="menu-item">
                            <span data-part="label"></span>
                            <media-menu-item-indicator force-mount class="menu-indicator">✓</media-menu-item-indicator>
                        </media-menu-radio-item>
                    </template>
                </media-audio-track-radio-group>
            </media-menu>
        </div>
    </media-container>
</video-player>

.video-player,
.video-player media-container {
  position: relative;
  display: block;
}

.video-media {
  width: 100%;
}

.menu-bar {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.settings-trigger {
  padding: 6px 16px;
  color: black;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 9999px;
  backdrop-filter: blur(10px);
}

.menu {
  --media-menu-side-offset: 8px;
  box-sizing: border-box;
  display: grid;
  gap: 2px;
  min-width: 180px;
  max-width: var(--media-menu-available-width, var(--media-popover-available-width, none));
  max-height: var(--media-menu-available-height, var(--media-popover-available-height, none));
  padding: 6px;
  overflow: auto;
  overscroll-behavior: none;
  font-size: 14px;
  color: white;
  background: rgba(0, 0, 0, 0.88);
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.menu-group {
  display: grid;
  gap: 2px;
}

.menu-item {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 0 10px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 6px;
}

.menu-item[data-highlighted] {
  background: rgba(255, 255, 255, 0.16);
}

.menu-indicator {
  opacity: 0;
}

media-menu-radio-item[aria-checked="true"] .menu-indicator {
  opacity: 1;
}

import '@videojs/html/video/player';
import '@videojs/html/media/hlsjs-video';
import '@videojs/html/ui/menu';
import '@videojs/html/ui/audio-track-radio-group';

API Reference

Props

Prop	Type	Default
`disabled`	`boolean`	`false`
Attribute `disabled` Description Whether audio track selection is disabled.
`formatTrack`	`Text) \| function`	`formatTrackLabel`
Attribute `format-track` Description Custom formatter for visible track labels. Type `((track: MediaAudioTrack) => string \| Text)`
`label`	`Text \| string \| Text) \| function`	`''`
Attribute `label` Description Custom label for the options group. Type `Text \| string \| ((state: AudioTrackRadioGroupState) => string \| Text)`

State

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

State is reflected as data attributes for CSS styling.

Property	Type	Details
`tracks`	`AudioTrackRadioGroupTrack[]`
`value`	`string`
`disabled`	`boolean`
`availability`	`'available' \| 'unavailable'`
`label`	`Text \| string`

Data attributes

Attribute	Type	Details
`data-audio-track`	`string`
Description Current audio track value.
`data-disabled`
Description Present when audio track selection is disabled.
`data-availability`	`'available' \| 'unavailable'`
Description Indicates audio track availability (`available` or `unavailable`).