HTML5 video stutter on loop

Question

I have a simple HTML5 video on my website. I want it to loop so I added loop tag to it. It works, the problem is that it stutters everytime it restarts. The video is very short, has only 8 seconds, but when it reaches the end, and then restarts, the very first frame of the video "freezes" about half of a second. I tested it on Chrome and on Firefox, it only happens on Chrome.

After google it I found several workarounds, but none of them worked for me. I tried to catch the ended event of the video in JS so I play the video again, to clear the poster image of the video when it starts to play $video.attr('poster', ''), and so on.

If I play the video on Windows Media Player or any other video player with "repeat" mode on, it loops without any stutter, so I don't think is something related with the video encoding.

<video loop>
    <source src="myvid.mp4" type="video/mp4">
</video>

score 10 · Accepted Answer · answered May 25 '16 at 18:15

10

When trying to optimize my video size, I found Handbrake, a video editor software. After optimize my video size with this software, it gone from 1.4MB to 272KB, and magically the stutter disappeared.

So after all, it really was about video encoding, or something related with.

For those who came here from google and have already tried the many workarounds suggested to this problem in other stack questions, try to optimize your video with Handbrake and I hope your "stutter" goes away.

answered May 25 '16 at 18:15

Pedro Estevão

982
1
13
41

What kind of settings are you using? – Simon_Weaver Jul 24 '18 at 22:19
I'm not convinced about this at all. There are different levels of 'stutter' and if you're looking for absolutely zero stutter then I don't think it's going to happen - especially on mobile devices. For a short 2 second video on iOS and Android Chrome I'm seeing a horrible stutter at the beginning of the video every time :-( – Simon_Weaver Jul 24 '18 at 22:26
I also reduced an mp4 to 300x200 at super low quality such that a 10 frame animation was 34kb and I still get a lag. The animation is similar to flowing water - so any delay whatsoever in looping destroys it. This will of course not be an issue for many situations. So back to animated GIF it is - unfortunately. – Simon_Weaver Jul 24 '18 at 22:35
But for sure any file reduction is great! And Handbrake has some nice settings :-) – Simon_Weaver Jul 24 '18 at 22:36
Thanks for this - it worked for me as of this writing. I managed to get a video to a minimal filesize while looping cleanly. – alexcs Jul 18 '19 at 14:21
I found out that removing the audio channel helps a lot, I managed to keep the video of high quality. that's a good solution for those whose video is muted anyway – Or Bachar May 28 '21 at 11:49
Handbrake also did the trick for me - I used their "Vimeo YouTube 720p30" preset and it worked wonders! – Ace Jun 01 '22 at 20:15

score 4 · Answer 2 · answered Jan 28 '19 at 19:42

In my own attempts to loop a seamless Ken Burns clip as a background for a hero unit, I also ran into inexplicable stutter issues. Turns out, the loop property isn't implemented very well in many browsers, generally giving me a half second to full second pause before resuming playback. To correct this, I had to implement my own looping behaviour:

document.querySelector('video').addEventListener('ended', function(e) {
    e.target.currentTime = 0;
    e.target.play();
}, false);

This was fast enough in testing to appear actually seamless. Complex stream encoding (e.g. use of lookahead frames or other non-baseline features) will only compound this overall issue. Always make sure you export your video "for the web" / "streaming", which disables these incompatible features.

score 0 · Answer 3 · answered Aug 02 '22 at 06:31

I merged amcgregor's solution with Thomas Brad's solution and came up with something like this:

document.querySelector('video').addEventListener('timeupdate', function(e) {
    if(e.target.duration - e.target.currentTime <= 1) {
        e.target.currentTime = 0;
        e.target.play();
    }
}, false);

With this one stutter goes away even for not well encoded videos.

HTML5 video stutter on loop

3 Answers3

Linked