Video Events
React to playback state changes — play, pause, ended, seeking, time update, volume change, buffering, and errors.
Video events fire in response to playback state changes. Each event handler receives an object with the current ScenaVideoState and the original browser Event:
interface ScenaVideoEventOptions {
state: ScenaVideoState;
event: Event;
}
The error event may carry an error field instead of event:
interface ScenaVideoEventOptionsWithError {
state: ScenaVideoState;
error: unknown;
}
Events
| Event | String value | When |
|---|---|---|
ON_VIDEO_READY | video:on-ready | Video metadata is loaded and ready to play |
ON_VIDEO_CAN_PLAY | video:on-can-play | Enough data buffered to start playback |
ON_VIDEO_PLAY | video:on-play | Playback starts or resumes |
ON_VIDEO_PAUSE | video:on-pause | Playback is paused |
ON_VIDEO_ENDED | video:on-ended | Playback reaches the end |
ON_VIDEO_SEEKING | video:on-seeking | Video is seeking to a new position |
ON_VIDEO_SEEKED | video:on-seeked | Seek operation completes |
ON_VIDEO_SEEK_START | video:on-seek-start | User begins dragging the progress bar |
ON_VIDEO_SEEK_END | video:on-seek-end | User releases the progress bar |
ON_VIDEO_TIME_UPDATE | video:on-time-update | Current playback time changes |
ON_VIDEO_VOLUME_CHANGE | video:on-volume-change | Volume level or mute state changes |
ON_VIDEO_STATE_CHANGE | video:on-state-change | Any video state property changes |
ON_VIDEO_LOAD_START | video:on-load-start | Browser begins loading the video |
ON_VIDEO_LOADED | video:on-loaded | Video data is fully loaded |
ON_VIDEO_WAITING | video:on-waiting | Playback stalls due to buffering |
ON_VIDEO_PROGRESSED | video:on-progressed | Browser downloads more video data |
ON_VIDEO_ERROR | video:on-error | A playback or loading error occurs |
Usage
import { ScenaEvent } from '@retoo/scena';
instance.api.events.on(ScenaEvent.ON_VIDEO_PLAY, ({ state, event }) => {
console.log('Playing, current time:', state.currentTime);
});
instance.api.events.on(ScenaEvent.ON_VIDEO_TIME_UPDATE, ({ state }) => {
console.log('Time:', state.currentTime, '/', state.duration);
});
instance.api.events.on(ScenaEvent.ON_VIDEO_ENDED, ({ state }) => {
console.log('Finished');
});
instance.api.events.on(ScenaEvent.ON_VIDEO_ERROR, (data) => {
if ('error' in data) {
console.error('Error:', data.error);
}
});
Seek events
There are two levels of seek events:
ON_VIDEO_SEEKING/ON_VIDEO_SEEKED— native browser seek events, fire on any seek operation.ON_VIDEO_SEEK_START/ON_VIDEO_SEEK_END— fire when the user interacts with the progress bar.
instance.api.events.on(ScenaEvent.ON_VIDEO_SEEK_START, ({ state }) => {
console.log('User started seeking from', state.currentTime);
});
instance.api.events.on(ScenaEvent.ON_VIDEO_SEEK_END, ({ state }) => {
console.log('User seeked to', state.currentTime);
});