With multiple players, force only one player to be playing

After going through many plugins, this is the best media player for React I’ve found so thank you!

I’m using this just for audio with the File player type. I have a playlist which is just a list of multiple <ReactPlayer /> elements and I’d like to force it to only play one player at a time. Thus, if a player is playing and you press play on another player, then the first player stops. Currently, it will play any and all players simultaneously.

Looking through all of the issues I couldn’t find a reference to this so my apologies if this is a duplicate.

How can I force only one player to play on the page at any given time?

[superbuggy]

In the container component holding all your <ReactPlayer>s components, you would have to keep track of which player is playing. You could possibly use array indexes as ids for your child <ReactPlayer>s, if you’re not doing anything to the array that would change the order of the child <ReactPlayer>.

The <PlayerContainer> component should have a method for changing its state that keeps track of the id of the currently playing <ReactPlayer>, pass playing={false} (or just not pass a playing prop) to every other child after state changes.

You’d pass this method as the onPlay to each <ReactPlayer> also.

Does that make sense?

[t-lochhead]

In the container component holding all your <ReactPlayer>s components, you would have to keep track of which player is playing. You could possibly use array indexes as ids for your child <ReactPlayer>s, if you’re not doing anything to the array that would change the order of the child <ReactPlayer>.

The <PlayerContainer> component should have a method for changing its state that keeps track of the id of the currently playing <ReactPlayer>, pass playing={false} (or just not pass a playing prop) to every other child after state changes.

You’d pass this method as the onPlay to each <ReactPlayer> also.

Does that make sense?

I tried this solution but ran into a problem: ReactPlayer doesn’t seem to register a state change through the YouTube iframe. Has anyone else solved this issue? It seems to not be a problem on mobile for some reason.