Can we loop the video in a selected time range?

[ameytessact]

Hi, I have a custom layout in Vidstack React. I want to know if I can programmatically set the video player to loop in a range of time $[t_1, t_2 ]$ where $0\leq t_1\leq t_2\leq duration$.
The loop may be activated, modified, or removed while the playing or paused.

Thanks for the help.

[mihar-22]

I don't know what framework you're using but you can set the clipStartTime and clipEndTime player properties and dynamically set loop as desired.

React example where start is 60 seconds and end is 120 seconds and looped:

<MediaPlayer clipStartTime={60} clipEndTime={120} loop>

[ameytessact]

This changes the video duration. I'm trying to create an interface where user can select the start and end time as well, and then when clicked play, currentTime would keep looping in $[t_1, t_2]$ while the actual video duration remains the same.
This experience is similar to a video trimming experience where user can select a part and watch only that part but also go back out of the selection.

[mihar-22]

Ah I see, no this feature is not supported out of the box at the moment. You can force the video yourself to loop between those times by subscribing to time updates and pausing/looping as needed.

[ameytessact]

thank you, i will try that

[ameytessact]

@mihar-22 Will it be possible to share a small example how to implement the looping properly?
Currently, I am checking if the $t_2$ is close to currentTime and then pausing. But when I play again at the same timestamp, I want the user to start playing from $t_1$. I am not able to achieve this properly.

[mihar-22]

function onPlay() {
  if (time >= t2) player.currentTime = t1;
}

function onTimeUpdate(time) {
  if (time >= t2) {
    player.pause();
    player.currentTime = t1;
  }
}

<MediaPlayer onPlay={onPlay} onTimeUpdate={onTimeUpdate}