这是我想到的一个解决办法。

import { useState } from "react";
import React from "react";

import "./styles.css";

let flex = {
  display: "flex"
};
let leftParent = {};

let VidInstance = React.forwardRef((props, ref) => {
  return (
    <div style={{ display: !props.mute ? "flex" : "none", width: 200 }}>
      <video
        controls=""
        preload="none"
        autoPlay
        src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
        width="200"
        muted={props.mute}
      ></video>
    </div>
  );
});

export default function App() {
  let [view, setView] = useState(false);

  return (
    <div className="App">
      <flex style={flex}>
        <leftParent style={leftParent}>
          <Box />
          <Box />
          <VidInstance key="vid" mute={view} />
        </leftParent>
        <VidInstance key="vid" mute={!view} />
      </flex>
      <button onClick={() => setView(!view)}>view</button>
    </div>
  );
}

let Box = () => {
  let boxStyle = {
    width: "200px",
    margin: "2px",
    height: "100px",
    background: "blue"
  };
  return <div style={boxStyle}></div>;
};

1.同时加载两个VidInstance以同步它们的播放时间。
1.用 Package 函数div Package VidInstance，并给予div与视频具有相同的宽度，以便在隐藏视频时保留空白空间。
1.将mute prop传递给VidInstance以静音并隐藏非活动视频。

您必须在视频标签中使用标签<source> ...它对我很有效：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>