Playback

Play/pause state and actions for the player store

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

State

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

Actions

Action	Description
`play()`	Start playback (returns a `Promise`)
`pause()`	Pause playback

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.toggle}>{playback.paused ? 'Play' : 'Pause'}</button>;
}

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

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

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

API Reference

Parameters

Parameter	Type	Default
`state*`	`object`	`—`

Return Value

MediaPlaybackState | undefined