My situation: I want to post a short video (1 sec) on a page. In this case, it is necessary to loop it. For this I use the <video loop ...> tag. Everything works fine, but when the video ends, there is a slight delay in the Firefox browser between the last and first frame (0.5 sec). At the same time, I do not observe such behavior in Chrome.

To solve this problem, I tried various techniques:

1. I tried to draw video in <canvas> tag
2. I tried to listen to the "ended" event and rewind the video by 0 second when it occurs
3. Reduce video quality to incredible levels. The video had a lot of artifacts
4. Used HandBrake with "Web optimized" option

All of these methods failed.

To demonstrate this, I created a 1 second video (60 FPS) where you can see the delay between the last and first frame if you open it in the Firefox browser: https://codesandbox.io/s/unnecessary-delay-between-last-and-first-frame-5dwnfb?file=/index.html

How do you think this can be resolved?

Thanks!