Javascript 如果所选视频正在react中播放，请暂停其他视频

我正在使用react player播放我的视频。我的问题是，在播放选定的视频时，如何暂停其他视频

const videoRef = useRef();

const updateVideoHandler = async (videoId, videoTitle) => {
  setSelectedVideoId(videoId);
  if (!selectedVideoId) {
    videoRef?.current?.player?.player?.onPause();
  }
};

<ReactPlayer
  ref={videoRef}
  onPlay={() => updateVideoHandler(video.id, video.title)}
  playsinline={true}
  playing={true}
  controls={true}
  url={video?.url}
  width="100%"
  height="100%"
  playIcon={
    <div
      className="play-icon"
      role="button"
      tabIndex={0}
      style={{ outline: "none" }}
    >
      {" "}
      <img src="/images/play.png" alt="" />
    </div>
  }
  light={video?.pic}
/>;

---

您可以将所有播放器实例存储在一个上下文中，并在开始播放时使用提供者和使用者暂停所有播放器

由于将播放布尔值传递给ReactPlayer，因此可以轻松存储当前播放播放器的id或引用

例如：

PlayerProvider.jsx

Player.jsx

Page.jsx

---

我在这里使用视频react实现了它：

你需要使用

控制， 预加载=“自动”， 自动播放 或 您还可以弹出一个模式并显示视频，然后使用此选项

    <div>
      <button onClick={this.playVideo}>
        Play!
      </button>
      <button onClick={this.pauseVideo}>
        Pause!
      </button>
    </div>

---

您需要将状态存储在这些onClick中，以便根据特定视频的useref播放和暂停，否则，如果您使用模式，请在关闭后销毁它，以便视频在关闭后不会播放。

如果您可以将这些部分分为多个文件，那就太好了。谢谢，谢谢你的建议太好了！它应该是onClickPreview而不是handleClickPreview，而且它不会暂停其他视频？没错，更新了代码示例。给定的代码示例应该为您指出正确的方向。如果你提供一个工作的代码沙盒或类似的东西，我可以给你一个工作的例子。不确定，这取决于你使用的是哪个iOS版本。您可能需要单击事件才能以编程方式启动播放。您可以尝试使用useRef

import { PlayerContext } from './PlayerProvider';

function Player({ video, id }) {
  const { isPlaying, play, pause } = useContext(PlayerContext);

  <ReactPlayer
    ref={videoRef}
    playsinline={true}
    playing={isPlaying(id)}
    controls={true}
    url={video?.url}
    width="100%"
    height="100%"
    onPause={() => pause(id)}
    onEnded={() => pause(id)}
    onClickPreview={() => play(id)}
    playIcon={
      <div
        className="play-icon"
        role="button"
        tabIndex={0}
        style={{ outline: "none" }}
      >
        {" "}
        <img src="/images/play.png" alt="" />
      </div>
    }
    light={video?.pic}
  />;
}

export default Player;

import PlayerProvider from './PlayerProvider';
import Player from './Player';

function Page() {
  return (
    <PlayerProvider>
      <Player video="/path/to/video1.mp4" id="player1" />
      <Player video="/path/to/video2.mp4" id="player2" />
      <Player video="/path/to/video3.mp4" id="player3" />
    </PlayerProvider>
  )
}

    <div>
      <button onClick={this.playVideo}>
        Play!
      </button>
      <button onClick={this.pauseVideo}>
        Pause!
      </button>
    </div>