Volume

Volume level and mute state for the player store

Controls volume level and mute state.

State

State	Type	Description
`volume`	`number`	Volume level from 0 (silent) to 1 (max)
`muted`	`boolean`	Whether audio is muted
`volumeAvailability`	`MediaFeatureAvailability`	Whether volume can be set on this platform

Actions

Action	Description
`setVolume(volume)`	Set volume (clamped 0–1). Auto-unmutes when raising above zero.
`toggleMuted()`	Toggle mute. Restores volume to 0.25 when unmuting at zero.

Selector

Pass selectVolume to PlayerController to subscribe to volume state. Returns undefined if the volume feature is not configured.

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

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, MediaElement, selectVolume } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

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

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

API Reference

Parameters

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

Return Value

MediaVolumeState | undefined