Playback

Play/pause state and actions for the player store

Controls play/pause state and tracks whether playback has started or is stalled.

Import

import { playbackFeature } from '@videojs/react';

The audioFeatures, liveAudioFeatures, liveVideoFeatures, and videoFeatures feature bundles include this feature.

API Reference

State

Property	Type	Details
`paused`	`boolean`
Description Whether playback is paused.
`ended`	`boolean`
Description Whether playback has reached the end.
`started`	`boolean`
Description Whether playback has started (played or seeked).
`waiting`	`boolean`
Description Whether playback is stalled waiting for data.

Actions

Action	Type	Details
`play`	`() => Promise<void>`
Description Start playback.
`pause`	`() => void`
Description Pause playback.
`togglePaused`	`() => boolean`
Description Toggle play/pause. Returns `true` if playback started.

Selector

Pass selectPlayback to usePlayer to subscribe to playback state. Returns undefined if the playback feature is not configured.

import { selectPlayback, usePlayer } from '@videojs/react';

function PlayButton() {
  const playback = usePlayer(selectPlayback);
  if (!playback) return null;
  return <button onClick={playback.togglePaused}>{playback.paused ? 'Play' : 'Pause'}</button>;
}

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

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

class PlayButton extends UIElement {
  readonly #playback = new PlayerController(this, selectPlayback);
}