'HTML video tag: unnecessary delay between last and first frame
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:
- I tried to draw video in
<canvas>tag - I tried to listen to the "ended" event and rewind the video by 0 second when it occurs
- Reduce video quality to incredible levels. The video had a lot of artifacts
- 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!
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
