I am using React Player npm install for React project. The video player is in a modal. How do I stop it from playing when the modal closes? Is there a ReactPlayer.stop()
or a ReactPlayer.pause()
type of functionality that I can add in my hideModal
function?
<Modal show={this.state.show} handleClose={this.hideModal} >
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' width='100%'
height='100%' />
</Modal>
If this.state.show
returns Boolean value (true/false) you could control it through state like that:
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' playing={this.state.show} width='100%' height='100%' />
viciousP has the correct answer, but I think it's worth showing the full code example so others can see exactly how this works.
Using the State Hook
import React, { useState } from 'react';
import ReactPlayer from 'react-player';
function Video() {
const video_source = "https://vimeo.com/blahblah";
function close_video() {
setPlay(false)
}
const [play, setPlay] = useState(true);
return(
<ReactPlayer id="video" url={video_source} playing={play}/>
)
}
export default Video;
Now you can programmatically stop the video from playing by calling close_video()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With