selectPlayback

Select the playback state slice from the player store

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

The returned state includes paused, ended, and action methods like play, pause, and toggle.

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

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

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

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

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

API Reference

Parameters

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

Return Value

MediaPlaybackState | undefined