javascript - 如果所选视频正在播放，则暂停其他视频

Question

我正在使用 react-player https://github.com/cookpete/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}
/>;

Answer 1

您可以将所有玩家实例存储在 Context 中并使用 Provider和 Consumer暂停所有玩家，如果一个开始播放。

由于您通过了 playing bool 值到 ReactPlayer，您可以轻松存储当前播放播放器的 ID 或引用。

例如:

PlayerProvider.jsx

export const PlayerContext = React.createContext({
  play: (playerId) => true,
  pause: (playerId) => true,
  isPlaying: (playerId) => false,
});

function PlayerProvider({ children }) {
  // store the id of the current playing player
  const [playing, setPlaying] = useState('');

  // set playing to the given id
  const play = playerId => setPlaying(playerId);

  // unset the playing player
  const pause = () => setPlaying(false);

  // returns true if the given playerId is playing
  const isPlaying = playerId => playerId === playing;

  return (
    <PlayerContext.Provider value={{ play, pause, isPlaying }}>
      {children}
    </PlayerContext.Provider>
  )
}

export default PlayerProvider;

Player.jsx

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;

Page.jsx

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>
  )
}