Playback Rate Button

Preview
Code

PlaybackRateButton.jsx

"use client";

import { usePlayer, usePlayerSelector } from "@/registry/react/PlayerProvider";

export function PlaybackRateButton() {
  const player = usePlayer();
  const playbackRate = usePlayerSelector((p) => p.playbackRate);
  return (
    <button
      onClick={() => {
        player.playbackRate = playbackRate === 1 ? 1.5 : 1;
      }}
    >
      {playbackRate}x
    </button>
  );
}

Installation

npx @beyondwords/cli components add playback-rate-button

pnpm dlx @beyondwords/cli components add playback-rate-button

yarn dlx @beyondwords/cli components add playback-rate-button

bunx --bun @beyondwords/cli components add playback-rate-button

Usage

import { PlayerProvider } from '@/registry/react/PlayerProvider';
import { PlaybackRateButton } from '@/registry/react/PlaybackRateButton';

export function Player() {
  return (
    <PlayerProvider args={{ projectId: 9504, contentId: "ba00ef51-03ac-4a85-8b98-e45c957e8ef8", showUserInterface: false }}>
      <PlaybackRateButton />
    </PlayerProvider>
  );
}

The button reads playbackRate from the surrounding PlayerProvider. On click, it sets player.playbackRate directly on the instance, toggling between 1 and 1.5. The current rate renders as the label (e.g. 1x). Adjust the toggle logic to expose whatever speeds you want.

Reference


Props	None
Player state read	`playbackRate`
Events emitted	None. Sets `player.playbackRate` directly
Requires	a `PlayerProvider` ancestor

Getting started

Components

Examples

Installation

Usage

Reference

​Installation

​Usage

​Reference

Installation

Usage

Reference