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

我的问题是，使用两个视频之一可以达到60fps的流畅速度，但是当我交换视频时，帧速率会急剧下降

您可以在https://4j83wy06n9.codesandbox.io/

尝试一下

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

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

0 个答案: