HTML5 Video Seamless Looping

Question

I know this question has been asked a number of times, and I've looked through every single one of them here on StackOverflow.

I'm simply trying to loop a 5 second MP4 video in an HTML5 player and have it be seamless. I've tried both jwplayer and video.js, both locally and on webspace, and neither do the trick. I've tried using the "ended" events; I've tried preloading/prebuffering; I've tried listening for the final second of a video and then seeking to the beginning to bypass the stop/play events entirely. I still always see jitter, and I still always see the loading icon (latest Chrome & Firefox).

For reference, here's some of my latest code for video.js:

<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered"
  width="640" height="480"
  data-setup='{"controls": false, "autoplay": true, "loop": true, "preload": "auto"}'>
  <source src="video/loop_me.mp4" type="video/mp4" />
</video>

<script type="text/javascript">
  var myPlayer = videojs("loop_me");
  videojs("loop_me").ready(function(){
    this.on("timeupdate", function(){
      var whereYouAt = myPlayer.currentTime();
      if (whereYouAt > 4) {
        myPlayer.currentTime(1);
      }
    });
  });
</script>

Has anyone managed to do this successfully? And, if so, could you please post a complete solution? I don't normally ask for or want those, but I think it might be necessary this time.

Solution 1

You don't need any extra scripts for that kind of stuff.

The "video" tag has built in loop attribute, use this and your video will loop.

<video id="loop_me" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="480" controls autoplay loop>
  <source src="video/loop_me.mp4" type="video/mp4" />
</video>

You can also add preload attribute if you wanted to. If you want, you can find more information about the video tag here: HTML video Tag

Edit: Oops. Didn't notice Offbeatmammals comment under your question. :)

Solution 2

Try this:
1) edit your video this way:
[1s][2s][3s][4s][5s]
cut 1st second block of the video and append it 2x to the end like this:
[2s][3s][4s][5s][1s][1s]

2) Use code:

<video id="vid"  width="100" height="50" loop autoplay preload="true">
    <source src="something.mp4" type="video/mp4">
</video>

<!-- Goes to end of body of course -->
<script>
    var vid = document.getElementById("vid");
    vid.addEventListener("timeupdate", function () {
        if(this.currentTime >= 5.0) {
            this.currentTime = 0.0;
        }
    });
</script>

The idea behind this is to make the video seamless (the end of the video is the beginning of the video). Also, you have to make sure the video never ends. The loop attribute works with smaller video files but you see a black image at the end of the video if too large (before the next looping iteration). Essentially before the video ends, you are seeking back to 0.0s.

I hope that helps.

Solution 3

Heureka!

We've found the actual, real, work-around-free solution to this problem over at where I work. It explains the inconsistent behavior through multiple developers as well.

The tl;dr version is: Bitrates. Who would've guessed? What I suppose is that many people use standard values for this that usually are around 10 Mbit/s for HD videos if you use the Adobe Media Encoder. This is not sufficient. The correct value would be 18 Mbit/s or maybe even higher. 16 is still a bit janky. I cannot express how well this works. I've, by now, tried the messiest workarounds for about five hours until I found this together with our video editor.

I hope this helps everyone and saves you tons of time!

Comments

[Offbeatmammal]

you are probably going to have to use the MediaSource capabilities of HTML5 to feed your video to the video element as a continual stream if you want to avoid the pause while resetting the playhead to the beginning - see updates.html5rocks.com/2011/11/… for example

[Offbeatmammal]

d'oh .... sometimes the obvious worked wonders.... the loop property: <video id="video-loop" preload="auto" loop autoplay controls muted>

[Blowsie]

The accepted answer is not seamless jsfiddle.net/blowsie/QQTqn

[Josh Harrison]

If you happen to be using a poster attribute in your real code, try removing that after the video starts playing. For me this fixed a flicker between loops in Chrome where the poster image would display for a fraction of a second.

[Blowsie]

The loop from the html5 video is not seamless tho :( jsfiddle.net/blowsie/QQTqn

[daveycroqet]

@Blowsie Your fiddle actually plays seamlessly for me in Firefox, but in Chrome it shows a loading icon each time it loops.

[Blowsie]

@daveycroqet lets hope chrome can fix this bug soon

[Hari Honor]

Yes but why does that video not pause? Is it a screen size issue?

[Marlin Ouverson]

If the code is correct and set to loop, there should not be a pause -- but HTML5 video is still relatively new, so it appears not every web browser is interpreting the HTML5 standard in the same way. For commercial web sites and high-visibility content, we typically code to the standard, test thoroughly on many browsers on both OS X and Windows, perhaps on Linux, and then come up with custom code and/or design workarounds (possibly involving Javascript, CSS, et al.) for the browsers that don't exhibit standard behavior.

[Tanuki]

You can do this with canvas. Here is my answer about this: stackoverflow.com/questions/34097834/…

[Rauli Rajande]

Shouldn't this be: [1s][2s][3s][4s][5s][1s] As with your solution, there is flash of the video starting frame just before this loops.

[antonyh]

As of 2018 this plays seamlessly in Chrome and Firefox.

[Austin Burk]

Ooh, this is something that I haven't looked into! I have a large number of short videos that are supposed to loop and it always feels weird as we never got it to loop perfectly. I'm going to take a look into what our video bitrates are and see what I find.

[cregox]

as of 2020, this works on Firefox with a non standard setting (allow autoplay). and just doesn't seem to work on chrome anymore. but that doesn't make the answer so negatively wrong... 😒

[cregox]

fixed it, thanks to robsimpson.digital/articles/autoplay-html5-video + simply add muted playsinline. also recommend to replace with and height with style video { width: 100%; max-height: 100%; }

[waffl]

I just tested this at 2, 8, 10, 16, 20, 24 mbit bitrates and sadly, while the higher rates do help, it's still present :( Given the filesize increase of higher bitrate for a simple video (just for some rotating models), I'll probably have to just loop the sequence a few times and export at a lower bitrate :S remarkably frustrating issue

[waffl]

Sorry for another reply, actually the only thing that actually does work for me is lowering the resolution and bitrate which seems to allow the browser to keep it buffered better - who knows why looping an 800kb constant bit rate video is still an issue in 2020

[Merritt6616]

Yeah, nowadays what I can recommend is using lottie, period (airbnb.design/lottie). Strange that the higher bitrates didn't work for you, sorry about that :/

[Stephan Luis]

Necro++ I know this is 7years old., @Merritt6616 how is lottie used for animating/ transitioning html5 video? Would you mind giving a link to a description or tutorial. The Lottie link isn't that informative about the video transition topic. Thanks!