Playback rate

Controls speed of playback. playbackRateAvailability is unsupported when the media has no playback rate, such as an embed whose provider takes no speed command.

Import

import { playbackRateFeature } from '@videojs/html';

The audioFeatures and videoFeatures feature bundles include this feature.

(rate: number) => void

Playback rates

The player offers 0.5 through 2 in steps of 0.25 unless you set your own list. The playback rate button, the playback rate radio group, and the speedUp and speedDown hotkeys use this list unless you give one of them its own.

<video-player default-playback-rates="0.5 1 1.25 1.5 2">
  <media-container>
    <video src="/video.mp4"></video>
  </media-container>
</video-player>

The button cycles through the rates in the order you list them, and the menu shows them in that order. speedUp and speedDown move to the next faster or slower rate whatever the order, and do nothing at the fastest or slowest rate. The player ignores values that aren’t positive numbers, and repeated rates. If nothing usable is left, it falls back to the defaults.

Rates for one control

To give one control a different list, set rates on it. The rest of the player keeps the default list. The control offers these rates as given, even ones outside the media’s range, which play at the nearest end of the range.

<media-playback-rate-button rates="1 1.5 2"></media-playback-rate-button>

To make the speed hotkeys change speed in fixed steps instead, give speedUp and speedDown a value. A value of 0.1 moves from 1 to 1.1, then 1.2, and so on.

Rates outside the list

The media owns the current rate, so it can be one the menu doesn’t offer, such as 1.1 set through the media API or a stepped hotkey. The menu then shows that rate as an extra item, slotted before the next faster rate. Skins set it in italics, and its accessible name is “Custom, 1.1×”. The item goes away once the rate is back on the list. Normal speed (1) is added the same way when your list leaves it out, but isn’t marked custom.

Media range

Each media accepts rates within a range. Browsers play 0.0625 through 16, YouTube 0.25 through 2, and Vimeo up to 2. The player leaves out any defaultPlaybackRates outside that range and keeps the rest in your order. If none are left, it offers the defaults within the range and warns in development. setPlaybackRate clamps a rate outside the range to the nearest end, and warns in development. That includes 0, which would stop the picture while the player still reports playback; call pause() instead.

playbackRates lists rates even for a media that can’t change its rate, so check playbackRateAvailability before offering them.

YouTube rounds rates down to a step of 0.05, so asking for 1.13 plays at 1.1.

Selector

import { createPlayer, UIElement, selectPlaybackRate } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

const { PlayerController } = createPlayer({ features: videoFeatures });

class RateDisplay extends UIElement {
  readonly #rate = new PlayerController(this, selectPlaybackRate);
}