3

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

2 回答 2

6

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%' />

于 2019-04-11T23:29:10.760 回答
0

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

于 2021-12-01T01:25:19.057 回答