Pause other video if selected video is playing in react

Question

I'm using react-player https://github.com/cookpete/react-player to play my videos. My problem is, how can I pause other videos while selected video is playing?

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}
/>;

Chris · Accepted Answer · 2021-02-23T15:55:47.500

You could store all player instances in a Context and use a Provider and Consumer to pause all players if one starts playing.

Since you pass a playing boolean to ReactPlayer, you can easily store a id or reference of the current playing player.

For example:

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

It would be great if you could separate these parts into several files. Thanks — Joseph, Feb 23 '21 at 09:02
Great! It should be `onClickPreview` instead of `handleClickPreview` and also It doesnt pause the other video? — Joseph, Feb 23 '21 at 13:47
You're right, updated the code example. The given code example should point you in the right direction. If you provide a working Codesandbox or something similar, I can give you a working example. — Chris, Feb 23 '21 at 15:59
Hi! Do you have an idea why if I click on the `onClickPreview`, it doesnt play in IOS? You need to click on the `controls` just to play it? — Joseph, Feb 25 '21 at 07:19
Not sure, it depends on which iOS version you are using. It could be possible that you need the click event in order to initiate playback programmatically. — Chris, Feb 25 '21 at 16:42

score 0 · Answer 2 · answered Aug 25 '22 at 14:12

Actially this is very easy process to get try it out

export const VideoPlayer = () =>{
 const videoooo = useRef();
  const pauseVideo = () => {
  //at the place of pauseVideo you can use "stopVideo", "playVideo"
videoooo.current.contentWindow.postMessage(
      '{"event":"command","func":"pauseVideo","args":""}',
      "*"
    );
  };

return(<> <iframe
        ref={videoooo}
        id="myVideoId"
        src="https://www.youtube.com/embed/Q63qjIXMqwU?enablejsapi=1"
      ></iframe>
      <button
        onClick={() => {
          pauseVideo();
        }}
      >
        Pause
      </button></>)
}

it is very easy and useful syntax from js

score 0 · Answer 3 · edited Oct 18 '22 at 05:26

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

if you remove this line from the code it is working perfectly, when one video is already playing and you click on the second video, onPause is invoked and it is calling the pause function due to that setPlaying updating the playing value due to that page rerendering and in that time playing value is false and it does not match with any video id and that's why every video is stopped playing.

score -1 · Answer 4 · answered Feb 23 '21 at 08:38

I implemented it using video-react here :

react-video-js

You need to use

controls,
preload='auto',
autoplay

Or You can also pop-up a modal and show videos and use this

    <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.

Pause other video if selected video is playing in react

4 Answers4

Linked