Video palindrome loop / negative playback rate

I am trying to get multiple dynamically loaded videos to loop back and forth without exhibiting a stutter when changing directions.
Here my project example:

In the sketch it works so so but is not very stable. Especially once build in to a larger app this method stops working.

I find almost no browser seems to work with a negative playback rate or in p5js video.speed(-1)

I tried:

  • forward -> , rewind -> video.pause() + video.time(myTime);
  • + video.speed(0.01) and use video.time(myTime) with myTime increasing and decreasing
  • video.speed(0) work worse than video.speed(0.01) for some reason

Has anyone found a solid solution for this?

Here’s an example to play forward/reverse …

mp4’s are not really intended to play in reverse so it can be choppy at times.

Thanks for this.

In the past I encoded videos on my computer with mp4 and made sure to set it so each frame is a keyframe. that worked well enough.

But this time I tried using recordRTC to record a live camera. And I guess it does not give me the same keyframe encoding options which makes for .webm files that do not like rewinding.

I think I am just going to collect an array of images and cycle through them.

Another option is to create a second “backwards” video file – play the forwards video, then play the “backwards” video. Twice the video to load, but each one will work naturally, and you can swap between them at the end points.