usePlaybackRate()

usePlaybackRate(): number

Returns the current playback rate.

This hook provides a reactive way to observe and respond to changes in the player’s playback speed — useful for implementing features like playback speed controls, trick play, or slow-motion modes.

⚙️ Behavior:

• The playback rate is a floating-point value between (0, maxPlaybackRate].
• A value of 1.0 represents normal speed (default).
• Values lower than 1.0 slow down playback.
• Values higher than 1.0 speed up playback.
• Very high playback rates can cause buffer underruns or dropped frames if the decoder cannot keep up.

Platform notes

iOS

• Rates above 2.0 mute audio automatically.

⚠️ Must be used within a PlayerProvider or AVPlayerViewControllerProvider component.

Returns

number

number The current playback rate, a float between (0, maxPlaybackRate].

Example

import React from 'react';
import { View, Text, Button } from 'react-native';
import { usePlayer, usePlaybackRate } from '@castlabs/react-native-prestoplay';

export default function PlaybackSpeedControl() {
  const player = usePlayer();
  const rate = usePlaybackRate();

  const setSpeed = async (newRate: number) => {
    await player.setPlaybackRate(newRate);
  };

  return (
    <View>
      <Text>Playback speed: {rate.toFixed(1)}x</Text>
      <Button title="0.5x" onPress={() => setSpeed(0.5)} />
      <Button title="1.0x (Normal)" onPress={() => setSpeed(1.0)} />
      <Button title="1.5x" onPress={() => setSpeed(1.5)} />
      <Button title="2.0x" onPress={() => setSpeed(2.0)} />
    </View>
  );
}