js动态切换视频源会闪一下

Question

用js动态切换video的src会闪一下，有人知道怎么解决吗

import React from "react";

export default function A() {
    const [v, setV] = React.useState("1");
    return (
        <div>
            <video
                style={{ width: "100%" }}
                src={`/video/2-1-${v}.mp4`}
                muted
                autoPlay
                loop
                disablePictureInPicture
                playsInline
                preload="auto"
            ></video>
            <button
                onClick={() => {
                    v === "1" ? setV("2") : setV("1");
                }}
            >
                换
            </button>
        </div>
    );
}

Answer 1

弄两个叠加在一起的video，切换的时候把上面的销毁，显示出来下面的。
这样可以控制的细致一点，比如等待下方video ready之后再切换。