selectPlayback

Select the playback state slice from the player store

Import

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

Usage

Pass selectPlayback to usePlayer (React) or PlayerController (HTML) 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, features, MediaElement } from '@videojs/html';
import { selectPlayback } from '@videojs/core/dom';

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

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

API Reference

Parameters

Parameter	Type	Default
`state*`	`{}`	`—`

Return Value

MediaPlaybackState | undefined