Video Volume
Configure or disable the volume control component.
Volume control renders a mute/unmute toggle on the widget. It reflects the current mute state and lets users toggle audio without any additional configuration. Pass false to remove it if your use case doesn't require audio controls.
Config
| Property | Type | Description |
|---|---|---|
aria | Partial<ScenaVideoVolumeComponentAria> | ARIA attributes |
customClasses | Partial<ScenaVideoVolumeComponentClasses> | Custom CSS classes |
customStyles | Partial<ScenaVideoVolumeComponentStyles> | Custom inline styles |
Example
await scena.mount({
video: { src: '/video.mp4' },
videoVolume: {
aria: {
mute: { 'aria-label': 'Mute' },
unmute: { 'aria-label': 'Unmute' },
},
},
});
Disabling
await scena.mount({
video: { src: '/video.mp4' },
videoVolume: false,
});
Customization
The volume component accepts root, mute, and unmute as target keys:
await scena.mount({
video: { src: '/video.mp4' },
videoVolume: {
customClasses: {
root: 'my-volume-control',
mute: { icon: 'text-white' },
},
},
});
Interface
interface ScenaVideoVolumeProps {
size: ComponentSize;
aria: Partial<ScenaVideoVolumeComponentAria>;
customClasses: Partial<ScenaVideoVolumeComponentClasses>;
customStyles: Partial<ScenaVideoVolumeComponentStyles>;
}