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 |
customHtml | Partial<ScenaVideoVolumeComponentHtml> | Custom inner HTML for mute/unmute |
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' },
},
},
});
Pass customHtml.mute or customHtml.unmute to replace the button's inner HTML:
await scena.mount({
video: { src: '/video.mp4' },
videoVolume: {
customHtml: {
mute: '<svg ...>...</svg>',
unmute: '<svg ...>...</svg>',
},
},
});
Interface
interface ScenaVideoVolumeProps {
size: ComponentSize;
shape: ComponentShape;
aria: Partial<ScenaVideoVolumeComponentAria>;
customClasses: Partial<ScenaVideoVolumeComponentClasses>;
customStyles: Partial<ScenaVideoVolumeComponentStyles>;
customHtml: Partial<ScenaVideoVolumeComponentHtml>;
}