如果所选视频正在反应中播放，则暂停其他视频答案

【问题标题】：Pause other video if selected video is playing in react如果所选视频正在反应中播放，则暂停其他视频
【发布时间】：2021-05-25 11:47:31
【问题描述】：

我正在使用 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}
/>;

【问题讨论】：

你可以试试useRef

标签： javascript reactjs react-hooks react-player

【解决方案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>
  )
}

【讨论】：

如果您可以将这些部分分成几个文件，那就太好了。谢谢
太棒了！它应该是 onClickPreview 而不是 handleClickPreview 并且它不会暂停其他视频？
你是对的，更新了代码示例。给定的代码示例应该为您指明正确的方向。如果你提供一个工作的 Codesandbox 或类似的东西，我可以给你一个工作的例子。
嗨！你知道为什么如果我点击onClickPreview，它就不能在IOS 中播放吗？你需要点击controls才能玩吗？
不确定，这取决于您使用的 iOS 版本。您可能需要单击事件才能以编程方式启动播放。

【解决方案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.

【讨论】：