关闭模式时如何阻止 React Player 播放？答案

【问题标题】：How to stop React Player from playing when close modal?关闭模式时如何阻止 React Player 播放？
【发布时间】：2019-09-02 16:19:28
【问题描述】：

我正在为 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>

【问题讨论】：

请检查我的回答，这对你有用吗？
成功了！！非常感谢您的出色解决！

标签： reactjs video-player react-player

【解决方案1】：

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()以编程方式停止播放视频

【讨论】：

【解决方案2】：

如果this.state.show 返回布尔值（真/假），您可以通过这样的状态控制它：

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

【讨论】：

很高兴听到这个消息！