Controls volume level and mute state. Required by MuteButton and VolumeSlider components.
Import
import { volume, selectVolume } from '@videojs/react';
// or
import { volume, selectVolume } from '@videojs/html';
Usage
import { createPlayer, volume } from '@videojs/react';
const Player = createPlayer({
features: [volume],
});
import { createPlayer, volume } from '@videojs/html';
const { ProviderMixin, PlayerController, context } = createPlayer({
features: [volume],
});
State
Current volume level from 0 (silent) to 1 (maximum).
Whether audio is currently muted.
Whether volume control is supported on this platform. iOS Safari does not allow programmatic volume control.Possible values: 'available' | 'unavailable' | 'unsupported'
Actions
Set the volume level. The value is clamped to the range 0–1. Automatically unmutes when raised above zero.
Toggle mute on or off. Restores volume to 0.25 when unmuting at zero.
Selector
Use selectVolume to subscribe to only the volume slice of 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);
}
Required by: MuteButton, VolumeSlider
