mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
dbf717f1a7
Co-authored-by: Darius Cepulis <dcepulis@mux.com> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
73 lines
2.1 KiB
Plaintext
73 lines
2.1 KiB
Plaintext
---
|
||
title: Volume
|
||
description: Volume level and mute state for the player store
|
||
---
|
||
|
||
import UtilReference from "@/components/docs/api-reference/UtilReference.astro";
|
||
import DocsLink from "@/components/docs/DocsLink.astro";
|
||
import FrameworkCase from "@/components/docs/FrameworkCase.astro";
|
||
|
||
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
|
||
|
||
<FrameworkCase frameworks={["react"]}>
|
||
Pass `selectVolume` to <DocsLink slug="reference/use-player">`usePlayer`</DocsLink> to subscribe to volume state. Returns `undefined` if the volume feature is not configured.
|
||
</FrameworkCase>
|
||
|
||
<FrameworkCase frameworks={["html"]}>
|
||
Pass `selectVolume` to <DocsLink slug="reference/player-controller">`PlayerController`</DocsLink> to subscribe to volume state. Returns `undefined` if the volume feature is not configured.
|
||
</FrameworkCase>
|
||
|
||
<FrameworkCase frameworks={["react"]}>
|
||
```tsx title="VolumeSlider.tsx"
|
||
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))}
|
||
/>
|
||
);
|
||
}
|
||
```
|
||
</FrameworkCase>
|
||
|
||
<FrameworkCase frameworks={["html"]}>
|
||
```ts title="volume-slider.ts"
|
||
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);
|
||
}
|
||
```
|
||
</FrameworkCase>
|
||
|
||
<UtilReference util="selectVolume" />
|