Volume

Volume level and mute state for the player store

Controls volume level and mute state. These capabilities have independent availability values because media can support mute without supporting volume-level changes.

Import

import { volumeFeature } from '@videojs/react';

The audioFeatures, liveAudioFeatures, liveVideoFeatures, and videoFeatures feature bundles include this feature.

API Reference

State

Property	Type	Details
`volume`	`number`
Description Volume level from 0 (silent) to 1 (max).
`muted`	`boolean`
Description Whether audio is muted.
`volumeAvailability`	`'available' \| 'unavailable' \| 'unsupported'`
Description Whether volume can be programmatically set on this platform.
`mutedAvailability`	`'available' \| 'unavailable' \| 'unsupported'`
Description Whether the media can be muted. Separate from `volumeAvailability` because the two come apart: an embed can take a mute command while offering no way to set a level, and iOS Safari refuses a volume write on media that mutes perfectly well.

Actions

Action	Type	Details
`setVolume`	`(volume: number) => number`
Description Set volume (clamped 0-1). Returns the clamped value.
`toggleMuted`	`() => boolean`
Description Toggle mute state. Returns the new muted value.

Selector

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

Check volumeAvailability before showing a volume-level control, and check mutedAvailability before showing a mute control.

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

function VolumeSlider() {
  const vol = usePlayer(selectVolume);
  if (!vol || vol.volumeAvailability !== 'available') 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, UIElement, selectVolume } from '@videojs/html';
import { videoFeatures } from '@videojs/html/video';

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

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