FrameworkStyle

Volume

Volume level and mute state for the player store

Controls volume level and mute state.

API Reference

State

Property Type Details
volume number
muted boolean
volumeAvailability 'available' | 'unavailable' | 'unsupported'

Actions

Action Type Details
setVolume (volume: number) => number
toggleMuted () => boolean

Selector

Pass selectVolume to usePlayer 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))}
    />
  );
}