Video palindrome loop / negative playback rate

Gallery
1

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)
https://www.w3schools.com/tags/av_prop_playbackrate.asp

I tried:

  • forward -> video.play() , rewind -> video.pause() + video.time(myTime);
  • video.play() + 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?

2

Here’s an example to play forward/reverse …

https://editor.p5js.org/slow_izzm/sketches/xs_HCFPBa

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

3

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.

4

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.

2 Likes