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>

Answer 1

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.

Answer 2

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 (eg 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.

Answer 3

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.