Controls the playback speed. Required by PlaybackRateButton.
Import
import { playbackRate, selectPlaybackRate } from '@videojs/react';
// or
import { playbackRate, selectPlaybackRate } from '@videojs/html';
Usage
import { createPlayer, playbackRate } from '@videojs/react';
const Player = createPlayer({
features: [playbackRate],
});
import { createPlayer, playbackRate } from '@videojs/html';
const { ProviderMixin, PlayerController, context } = createPlayer({
features: [playbackRate],
});
State
Current playback speed. 1 is normal speed, 2 is double speed, 0.5 is half speed.
The list of available playback rate options presented to the user.
Actions
Set the playback speed to the given rate.
Selector
Use selectPlaybackRate to subscribe to only the playback rate slice of state. Returns undefined if the playbackRate feature is not configured.
import { selectPlaybackRate, usePlayer } from '@videojs/react';
function RateSelector() {
const rate = usePlayer(selectPlaybackRate);
if (!rate) return null;
return (
<select
value={rate.playbackRate}
onChange={(e) => rate.setPlaybackRate(Number(e.target.value))}
>
{rate.playbackRates.map((r) => (
<option key={r} value={r}>{r}x</option>
))}
</select>
);
}
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);
}
Required by: PlaybackRateButton
