Производительность (FPS) проблема при отображении видео внутри холста

Question

У меня возникла проблема, у меня есть 2 видео

Каждый кадр, в котором я показываю видео на холсте, как этот.

button.onclick = () => {
    if (
        video.src ===
        "https://github.com/Treast/javascript-dronie/blob/master/src/app/videos/circleButtonScaling.mp4?raw=true"
    ) {
        video.src =
            "https://github.com/Treast/javascript-dronie/blob/master/src/app/videos/circleButtonPulsing.mp4?raw=true";
    } else {
        video.src =
            "https://github.com/Treast/javascript-dronie/blob/master/src/app/videos/circleButtonScaling.mp4?raw=true";
    }

    video.play();
};

let video = document.createElement("video");
video.muted = true;
video.loop = true;

video.src =
    "https://github.com/Treast/javascript-dronie/blob/master/src/app/videos/circleButtonPulsing.mp4?raw=true";

function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.drawImage(video, 0, 0, 1280, 720);

    requestAnimationFrame(render);
}

render();

video.play();

Моя проблема в том, что с одним из двухвидео ровно 60 кадров в секунду, но когда я обмениваюсь видео, частота кадров резко падает

Вы можете попробовать это здесь https://4j83wy06n9.codesandbox.io/

Я действительно не понимаю, что происходит