ReferenceMenus

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.

Import

import '@videojs/html/ui/audio-track-radio-group';
import '@videojs/html/ui/menu-radio-item';
import '@videojs/html/ui/menu-item-indicator';

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-hidden`	Present / absent	Present when multiple audio tracks are unavailable.
`data-availability`	`"available"` / `"unavailable"`	Whether multiple audio tracks are available.

Unavailable groups receive the native hidden attribute.

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

<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-menu-content>
          <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-content>
      </media-menu>
    </div>
  </media-container>
</video-player>

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

.video-media {
  width: 100%;
}

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

.menu-bar:has([data-availability="unavailable"]) {
  display: none;
}

.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;
  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/ui/container';
import '@videojs/html/media/hlsjs-video';
import '@videojs/html/ui/menu';
import '@videojs/html/ui/menu-content';
import '@videojs/html/ui/menu-radio-item';
import '@videojs/html/ui/menu-item-indicator';
import '@videojs/html/ui/audio-track-radio-group';

API Reference

media-audio-track-radio-group

Menu radio group that generates a <media-menu-radio-item> per available audio track and shares the selected label and availability with an enclosing menu. An optional <template> holding one <media-menu-radio-item> customizes each generated item.

Props

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

State

State is reflected as data attributes for CSS styling.

Property	Type	Details
`label`	`{ key: string; text: string } \| string`
`value`	`string`
Description Current radio-group value.
`options`	`readonly Option[]`
Description Ordered options displayed by platform adapters.
`disabled`	`boolean`
Description Whether the entire option group is disabled.
`hidden`	`boolean`
Description Whether the option group is hidden because no meaningful selection is available.
`availability`	`'available' \| 'unavailable'`
Description Whether the media exposes a meaningful selection.

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-hidden`	—
Description Present when audio track selection is unavailable.
`data-availability`	`'available' \| 'unavailable'`
Description Indicates audio track availability (`available` or `unavailable`).

Events

Event	Description
`value-change`	Fired when the selected value changes.