I want to have video clips that seamlessly transition from one to another(with idle animations). For starters, I wanted to use the normal browser player and just switch sources when one clip ends like this:

var videos = [
    "video/1.webm",
    "video/2.webm",
    "video/3.webm",
    "video/4.webm",
];
let i = 0;
const videoCount = videos.length;
const element = document.getElementById("video");
element.addEventListener('ended', myHandler, false);

function myHandler() {
    i++;
    if (i == videoCount) {
        i = 0;
    }
    element.setAttribute("src", videos[i]);
    element.autoplay = true;
    // element.preload = true;
    // element.muted = true;
    element.load();
}

The problem is that there is a stutter/flicker or delay before a new clip starts playing(in chrome and firefox). The clips I have don't contain any black or empty frames(clips I have loop fine).

As far as I can tell it shows a blank screen for a frame or two.

Is there any way to preload the clips so they switch instantaneously?