Controls
Playback Speed
Controls
Playback Speed
The RateSelect and RateSelectItem components provide an interface for users to adjust the playback speed of the media.
All of the RateSelect components extend from
@radix-ui/react-select,
and inherits all of the documentation for those components.
Features
- Composes a dropdown menu for selecting any playback speed, and handles syncing with the underlying media element
- Keyboard navigation (with Radix) and adheres to WAI-ARIA design patterns
Anatomy
Import the components and piece the parts together.
import * as Player from "@livepeer/react/player";
export default () => (
<Player.Root>
<Player.LiveIndicator>
<Player.RateSelect>
<Player.SelectTrigger>
<Player.SelectValue />
<Player.SelectIcon />
</Player.SelectTrigger>
<Player.SelectPortal>
<Player.SelectContent>
<Player.SelectScrollUpButton />
<Player.SelectViewport>
<Player.RateSelectItem>
<Player.SelectItemText />
<Player.SelectItemIndicator />
</Player.RateSelectItem>
<Player.SelectGroup>
<Player.SelectLabel />
<Player.RateSelectItem>
<Player.SelectItemText />
<Player.SelectItemIndicator />
</Player.RateSelectItem>
</Player.SelectGroup>
<Player.SelectSeparator />
</Player.SelectViewport>
<Player.SelectScrollDownButton />
<Player.SelectArrow />
</Player.SelectContent>
</Player.SelectPortal>
</Player.RateSelect>
</Player.LiveIndicator>
</Player.Root>
);
Props
RateSelect
Takes all props of the Radix Select Root component.
RateSelectItem
Takes all props of the Radix Select Item component.
value
Required - denote the playback speed value as a number.
Data Attributes
RateSelect
data-livepeer-rate-select
Identifies the rate select component within the Player.
data-rate
Indicates the selected playback speed value.
RateSelectItem
data-livepeer-rate-select-item
Identifies the rate select item within the Player.