---
title: Playback
description: Play/pause state and actions for the player store
---

import FeatureReference from "@/components/docs/api-reference/FeatureReference.astro";
import DocsLink from "@/components/docs/DocsLink.astro";
import FrameworkCase from "@/components/docs/FrameworkCase.astro";

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

<FeatureReference feature="playback" />

### Selector

<FrameworkCase frameworks={["react"]}>
Pass `selectPlayback` to <DocsLink slug="reference/use-player">`usePlayer`</DocsLink> to subscribe to playback state. Returns `undefined` if the playback feature is not configured.
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
Pass `selectPlayback` to <DocsLink slug="reference/player-controller">`PlayerController`</DocsLink> to subscribe to playback state. Returns `undefined` if the playback feature is not configured.
</FrameworkCase>

<FrameworkCase frameworks={["react"]}>
```tsx title="PlayButton.tsx"
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>;
}
```
</FrameworkCase>

<FrameworkCase frameworks={["html"]}>
```ts title="play-button.ts"
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);
}
```
</FrameworkCase>
