mderrick/react-html5video

Dealing with multiple players in single page

Closed this issue · 3 comments

In a single webpage I am displaying number of "react-html5video" players.
I want to pause current playing video while playing another video.

Can any one suggest me a correct process to overcome this.

Thanq...

Frezc commented

You can add the CustomComponent as Video 's child, and expose a prop like
isPlaying: React.PropTypes.bool.isRequired
In your CustomComponent, implement componentWillReceiveProps method. Inside it call this.props.play() or this.props.pause().
If you wanna auto pause while playing another, try to manage with root app's state.

I don't know how you are maintaining your apps state so architecturally I'm not sure I have a specific answer for you.

However you can pass onPlay={() => { // Pause all other videos. }} prop to each video and in there, loop over the remaining videos (except the current one) and pause them all.

Thanq for your response, I achieved this by "document.getElementsByTagName('video')[i].pause()".

I just paused remaining all videos except current clicked one by using a loop.