---
title: Playback rate
description: Playback speed state and actions for the player store
---

import UtilReference from "@/components/docs/api-reference/UtilReference.astro";
import DocsLink from "@/components/docs/DocsLink.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";

Controls speed of playback.

## State

| State | Type | Description |
|---|---|---|
| `playbackRate` | `number` | Current playback speed (1 = normal) |
| `playbackRates` | `readonly number[]` | Available playback rates |

## Actions

| Action | Description |
|---|---|
| `setPlaybackRate(rate)` | Set the playback speed |

## Selector

<FrameworkCase frameworks={["react"]}>
Pass `selectPlaybackRate` to <DocsLink slug="reference/use-player">`usePlayer`</DocsLink> to subscribe to playback rate state. Returns `undefined` if the playback rate feature is not configured.
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
Pass `selectPlaybackRate` to <DocsLink slug="reference/player-controller">`PlayerController`</DocsLink> to subscribe to playback rate state. Returns `undefined` if the playback rate feature is not configured.
</FrameworkCase>

<FrameworkCase frameworks={["react"]}>
```tsx title="RateDisplay.tsx"
import { selectPlaybackRate, usePlayer } from '@videojs/react';

function RateDisplay() {
  const rate = usePlayer(selectPlaybackRate);
  if (!rate) return null;

  return <span>{rate.playbackRate}x</span>;
}
```
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
```ts title="rate-display.ts"
import { createPlayer, MediaElement, selectPlaybackRate } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const { PlayerController, context } = createPlayer({ features: videoFeatures });

class RateDisplay extends MediaElement {
  readonly #rate = new PlayerController(this, context, selectPlaybackRate);
}
```
</FrameworkCase>

<UtilReference util="selectPlaybackRate" />