ReferenceMenus

media-playback-rate-radio-group

A menu radio group for selecting playback speed

Creates radio items from the player playback rate state and selects the playback speed.

Import

import '@videojs/html/ui/playback-rate-radio-group';
import '@videojs/html/ui/menu-radio-item';
import '@videojs/html/ui/menu-item-indicator';

Anatomy

<media-playback-rate-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-playback-rate-radio-group>

Behavior

The group is available when the configured media exposes playback rates. It offers the player’s playback rates, or its own when you set rates. Option labels default to the rate followed by a multiplication sign (e.g. 1.5×); pass formatRate to customize them.

When the current rate isn’t one the group offers, such as 1.1 set through the media API, the group adds it as an extra item before the next faster rate. That item carries data-custom, and its accessible name is “Custom, 1.1×” while its visible label stays 1.1×. It goes away once the rate is back on the list.

<media-playback-rate-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-rate`	`number`	Current playback rate.
`data-disabled`	Present / absent	Present when playback rate selection is disabled.
`data-hidden`	Present / absent	Present when playback-rate selection is unavailable.
`data-availability`	`"available"` / `"unavailable"`	Whether playback rates are available.

Unavailable groups receive the native hidden attribute. Each item carries data-rate, and an item for a current rate the group doesn’t offer also carries data-custom.

Accessibility

The group uses the menu radio group pattern.

The element receives an accessible label from the label property or defaults to Playback rate. Override it with aria-label or aria-labelledby.

Examples

Basic usage

<video-player class="video-player">
  <media-container>
    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" autoplay muted playsinline loop></video>
    <div class="menu-bar">
      <button type="button" commandfor="speed-menu" class="settings-trigger">Speed</button>
      <media-menu id="speed-menu" side="top" align="end" class="menu">
        <media-menu-content>
          <media-playback-rate-radio-group class="menu-group" aria-label="Speed">
            <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-playback-rate-radio-group>
        </media-menu-content>
      </media-menu>
    </div>
  </media-container>
</video-player>

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

.video-player 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;
  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/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/playback-rate-radio-group';

API Reference

media-playback-rate-radio-group

Menu radio group that generates a <media-menu-radio-item> per available playback rate 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 playback rate selection is disabled.
`formatRate` attribute `format-rate`	`function`	`formatPlaybackRate`
Description Custom formatter for visible playback rate labels. Type `((rate: number) => string)`
`rates`	`readonly number[] \| string`	`[]`
Description Rates to offer, in order, in place of the player's `defaultPlaybackRates`. HTML takes a space-separated list, such as `rates="1 1.5 2"`.

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' \| 'unsupp...`
Description Whether the media exposes a meaningful selection. `unsupported` when the media has no such capability at all. Type `'available' \| 'unavailable' \| 'unsupported'`
`rate`	`number`

Data attributes

Attribute	Type	Details
`data-rate`	`number`
Description Current playback rate.
`data-disabled`	—
Description Present when playback rate selection is disabled.
`data-hidden`	—
Description Present when playback rate selection is unavailable.
`data-availability`	`'available' \| 'unavailable' \| 'unsupp...`
Description Indicates playback rate availability (`available`, `unavailable`, `unsupported`). Type `'available' \| 'unavailable' \| 'unsupported'`

Events

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