← Blog

The HTML video glitch

The reel flickered between clips, even though every clip was already loaded into memory.

The reel page plays ten short clips one after another. Between every clip there was a single frame of black, so it flickered.

What confused me is that I'd already loaded all ten into memory before it started playing. There was nothing to wait for. No file to open, nothing to fetch.

Two gaps

As far as I can tell, swapping the clip in a video player does two things, and only one of them is about loading.

It lets go of the picture that's on screen straight away. Then it gets the next one ready.

Loading everything up front makes the second part instant. It does nothing about the first. There's still a moment where the player has dropped one picture and hasn't got the next, and on a dark page that shows up as a black flash.

So I went back to two players stacked on top of each other, which is how the page started out. The next clip loads into the hidden one while the current one is still playing, so changing clip is just a question of which player is in front. Both of them already have a picture up, so there's nothing to cover.

Worth remembering: when you take out a workaround because you've fixed what caused it, check what else it was covering up. Mine was covering two things and I'd only fixed one.

If any of it is useful on your project, say so.