Video Controls
Configure or disable the playback control panel (play, pause, etc.).
Video controls render a play/pause overlay on top of the video container. The overlay appears when the user hovers over the widget and fades out automatically — clicking it toggles playback.
Config
| Property | Type | Description |
|---|---|---|
aria | Partial<ScenaVideoControlsComponentAria> | ARIA attributes |
customClasses | Partial<ScenaVideoControlsComponentClasses> | Custom CSS classes |
customStyles | Partial<ScenaVideoControlsComponentStyles> | Custom inline styles |
Example
await scena.mount({
video: { src: '/video.mp4' },
videoControls: {
aria: {
play: { 'aria-label': 'Play video' },
pause: { 'aria-label': 'Pause video' },
},
},
});
Disabling
await scena.mount({
video: { src: '/video.mp4' },
videoControls: false,
});
Customization
The controls accept root, play, and pause as target keys:
await scena.mount({
video: { src: '/video.mp4' },
videoControls: {
customClasses: {
root: 'my-controls',
play: { icon: 'text-white' },
},
},
});
Interface
interface ScenaVideoControlsProps {
size: ComponentSize;
aria: Partial<ScenaVideoControlsComponentAria>;
customClasses: Partial<ScenaVideoControlsComponentClasses>;
customStyles: Partial<ScenaVideoControlsComponentStyles>;
}