Controlling playback

play, pause, setTime, setLoop, setControls

Your app can control playback: start and pause the video, jump to a point in time, and decide whether it loops. By default the preview handles this itself, with the play button and time scrubber of player mode. Controlling it from code is useful when you want to show the user the part of the video they just changed, or when the built-in controls don't fit your design and you build your own.

Play, pause and seek

play() and pause() do what the built-in button does, and setTime(seconds) jumps to a time. setLoop(loop) decides whether the video starts over at the end, as it does by default. The preview reports what happens through onPlay, onPause, and onTimeChange, listed under Events.

Seeking to what the user edits

The most useful seek follows the user's change. Every element in the state carries its globalTime, the second at which it appears in the video. When the user changes an element, find it and seek there; they then see their change the moment they make it:

1const element = preview.findElement((element) => element.source.name === 'Title');
2await preview.setTime(element.globalTime);

Your own controls

setControls(enabled)

The built-in controls are shown by default, and never for an image. When they don't fit your design, hide them and build your own; the methods above keep working:

1await preview.setControls(false);

Because the preview also pauses by itself while it buffers a file, keep a play button's state from onPlay and onPause rather than toggling it yourself:

1let playing = false;
2
3preview.onPlay = () => {
4  playing = true;
5  playButton.textContent = 'Pause';
6};
7
8preview.onPause = () => {
9  playing = false;
10  playButton.textContent = 'Play';
11};
12
13playButton.onclick = () => (playing ? preview.pause() : preview.play());

A range input is enough for a playhead, with the video's duration from onStateChange as its length. onTimeChange moves the handle while the video plays; setTime moves the video when the user drags the handle:

1preview.onStateChange = (state) => {
2  track.max = state.duration;   // seconds
3};
4
5preview.onTimeChange = (time) => {
6  track.value = time;
7};
8
9track.oninput = () => preview.setTime(Number(track.value));

The preview downloads and buffers files as it plays; onLoad fires when that starts and onLoadComplete when it ends. That is all a spinner needs:

1preview.onLoad = () => (spinner.hidden = false);
2preview.onLoadComplete = () => (spinner.hidden = true);

Next step

Why the preview has a second mode, and what it adds: Player and interactive mode.