Javascript 在画布内显示视频时的性能（FPS）问题

我面临一个问题，我有两个视频

每一帧我都会在画布中显示一个视频，如下所示

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();

我的问题是，两个视频中的一个是平滑的60fps，但当我交换视频时，帧速率急剧下降

你可以在这里试试

我真的不明白发生了什么事