Video Progress
Configure or disable the video progress bar.
Video progress bar shows the current playback position and adapts its shape to match the widget — a horizontal line for square, portrait, and landscape shapes, and a circular track for the circle shape. Users can drag it to seek to any point in the video.
Config
| Property | Type | Description |
|---|---|---|
hasBuffer | boolean | Show the buffered range indicator |
aria | Partial<ComponentAriaProps> | ARIA attributes |
customThickness | Partial<ScenaVideoProgressComponentThickness> | Override track thickness |
customClasses | Partial<ScenaVideoProgressComponentClasses> | Custom CSS classes |
customStyles | Partial<ScenaVideoProgressComponentStyles> | Custom inline styles |
Example
await scena.mount({
video: { src: '/video.mp4' },
videoProgress: {
hasBuffer: true,
},
});
Variants
The progress bar automatically adapts to the widget shape:
| Variant | Shape | Description |
|---|---|---|
line | square, portrait, landscape | Horizontal bar at the bottom |
circle | circle | Circular track around the widget |
Disabling
await scena.mount({
video: { src: '/video.mp4' },
videoProgress: false,
});
Customization
The progress bar accepts root, track, progress, and buffered as target keys:
await scena.mount({
video: { src: '/video.mp4' },
videoProgress: {
customClasses: {
progress: 'bg-blue-500',
buffered: 'bg-white/20',
},
},
});
Interface
interface ScenaVideoProgressProps {
size: ComponentSize;
hasBuffer: boolean;
aria: Partial<ComponentAriaProps>;
customThickness: Partial<ScenaVideoProgressComponentThickness>;
customClasses: Partial<ScenaVideoProgressComponentClasses>;
customStyles: Partial<ScenaVideoProgressComponentStyles>;
}