mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
dbf717f1a7
Co-authored-by: Darius Cepulis <dcepulis@mux.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
62 lines
1.9 KiB
Plaintext
62 lines
1.9 KiB
Plaintext
---
|
|
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" />
|