关闭模态时如何停止 React Player 播放？

Question

我正在为 React 项目使用 React Player npm install。视频播放器处于模态。模式关闭时如何停止播放？我可以在 hideModal 函数中添加 ReactPlayer.stop() 或 ReactPlayer.pause() 类型的功能吗？

<Modal show={this.state.show} handleClose={this.hideModal} >               
<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' width='100%'
height='100%' />
</Modal>

Answer 1

如果 this.state.show returns 布尔值 (true/false) 你可以通过这样的状态来控制它:

<ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' playing={this.state.show} width='100%' height='100%' />

Answer 2

viciousP 给出了正确的答案，但我认为值得展示完整的代码示例，以便其他人可以准确地了解它是如何工作的。

使用状态挂钩

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;

现在您可以通过调用 close_video()

以编程方式停止播放视频

关闭模态时如何停止 React Player 播放？

How to stop React Player from playing when close modal?

reactjs

video-player

react-player