selectVolume

Select the volume state slice from the player store

Import

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

Usage

Pass selectVolume to usePlayer (React) or PlayerController (HTML) to subscribe to volume state. Returns undefined if the volume feature is not configured.

The returned state includes volume, muted, and action methods like setVolume and setMuted.

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

function VolumeSlider() {
  const vol = usePlayer(selectVolume);
  if (!vol) return null;

  return (
    <input
      type="range"
      min={0}
      max={1}
      step={0.01}
      value={vol.volume}
      onChange={(e) => vol.setVolume(Number(e.target.value))}
    />
  );
}

import { createPlayer, features, MediaElement } from '@videojs/html';
import { selectVolume } from '@videojs/core/dom';

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

class VolumeSlider extends MediaElement {
  #volume = new PlayerController(this, context, selectVolume);
}

API Reference

Parameters

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

Return Value

MediaVolumeState | undefined