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 布尔值传递给 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>
  )
}

Answer 2

我在这里使用 video-react 实现了它：

react-video-js

你需要使用

controls,
preload='auto',
autoplay

或者您还可以弹出一个模态并显示视频并使用它

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

where you need to store the states inside these onClick for play and pause depending upon the useref of a particular video else if you use a Modal then destroy it after close so that video doesn't play once you close.

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

2 个答案: