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