Speed

A menu of playback rates, and commands to change them.

import { speed } from "react-video-kit/speed";

Adds 878 B to a player1.6 KB on its ownSource

Adds a Speed row to the settings menu. Open the settings menu below and change it, or use < and > if the hotkeys plugin is installed.

Open alone

0:00−0:000:00

"use client";import { VideoPlayer } from "react-video-kit/player";import { speed } from "react-video-kit/speed";const plugins = [speed({ rates: [0.5, 1, 1.5, 2, 3] })];export default function Speed() {  return <VideoPlayer src="/media/sample-720.mp4" poster="/media/poster.jpg" plugins={plugins} load="visible" />;}

Usage

tsx

import { VideoPlayer } from "react-video-kit/player";import { speed } from "react-video-kit/speed";const plugins = [speed()];<VideoPlayer src="/video.mp4" plugins={plugins} />;

To offer different rates, list them in the order they should appear:

tsx

speed({ rates: [1, 1.5, 2, 3] });

Change the rate from your own control

useCommands gives you the plugin's commands, with their types, from anywhere inside the player.

tsx

"use client";import { useCommands, useVideoState } from "react-video-kit";import { speed } from "react-video-kit/speed";function DoubleSpeed() {  const { set } = useCommands(speed);  const rate = useVideoState((media) => media.rate);  return (    <button aria-pressed={rate === 2} onClick={() => set(rate === 2 ? 1 : 2)}>      2×    </button>  );}

SpeedMenu is the row that appears in the settings menu. When you compose your own layout, put it in any menu:

tsx

import * as Video from "react-video-kit";import { SpeedMenu } from "react-video-kit/speed";<Video.Menu>  <Video.MenuTrigger aria-label="Speed">1×</Video.MenuTrigger>  <Video.MenuContent>    <SpeedMenu />  </Video.MenuContent></Video.Menu>;

Behaviour

SpeedMenu renders nothing while something locks the rate, such as an ad, or when the current source can't change rate, such as a live stream with no DVR window or while casting.
faster and slower move to the next listed rate, and do nothing at either end.
The persistence plugin can remember the rate between visits.

API

Options

Option	Type	Description
rates?	readonly number[]	The rates to offer, in order.

State

Read it with useVideoState(speed, (state) => …).

Field	Type	Description
rates	readonly number[]	The rates offered in the menu, in order.

Commands

Call them with useCommands(speed).

Command	Type	Description
set	(rate: number) => void	Sets the playback rate, which doesn't have to be one of `rates`.
faster	() => void	Moves up to the next higher rate in `rates`, if there is one.
slower	() => void	Moves down to the next lower rate in `rates`, if there is one.

Parts

Part	Description
SpeedMenu	Renders nothing while something, like an ad, locks the rate.