Video State
Playback state machine — idle, loading, playing, paused, ended, error.
An enum representing the current playback state of the video element. The value is available as a reactive property at controller.state and is also included in every video event payload.
import { ScenaVideoState } from '@retoo/scena';
States
| Value | String | Description |
|---|---|---|
IDLE | idle | Initial state before any playback action |
LOADING | loading | Video data is being loaded |
PLAYING | playing | Video is actively playing |
PAUSED | paused | Playback is paused |
ENDED | ended | Playback reached the end |
ERROR | error | A playback or loading error occurred |
Usage
const controller = instance.api.controller;
if (controller.state === ScenaVideoState.PLAYING) {
controller.pause();
}
if (controller.state === ScenaVideoState.ENDED) {
controller.seek(0);
await controller.play();
}
With events
The ON_VIDEO_STATE_CHANGE event fires whenever the state transitions. The handler receives the new state:
import { ScenaEvent, ScenaVideoState } from '@retoo/scena';
instance.api.events.on(ScenaEvent.ON_VIDEO_STATE_CHANGE, ({ state }) => {
switch (state) {
case ScenaVideoState.PLAYING:
console.log('Started playing');
break;
case ScenaVideoState.PAUSED:
console.log('Paused');
break;
case ScenaVideoState.ENDED:
console.log('Finished');
break;
case ScenaVideoState.ERROR:
console.log('Error occurred');
break;
}
});