为什么 react-player 即使在 playing={false} 时也在播放视频？

Question

反应播放器即使在 playing={false} 时也在播放视频。我正在使用包裹在我的播放器周围的 antd 模态。当我关闭模态状态更改为 false 时。这是在 react-player 中传递的，但播放器继续在后台播放。

    import React, { Component } from 'react'
    import { Modal } from "antd";
    import ReactPlayer from "react-player";

    export class demo extends Component {
        constructor(props) {
            super(props);
            this.state = {
            isModalOpen: false,
            };
        }

        ConfirmationModalhandleCancel = () => {
            this.setState({ isModalOpen: false });
        };
        
        ConfirmationModalPlay = () => {
            this.setState({ isModalOpen: true });
        };

        getVideo = () => {
            console.log("Modal state",this.state.isModalOpen)
            return (
            <ReactPlayer
                playing={this.state.isModalOpen}
                className="introductionVideoLearningPlanPage"
                controls={true}
                url="https://www.youtube.com/watch?v=agi4geKb8v8"
            />
            );
        };
        
        getIntroVideoModal = () => {
            return (
            <Modal
            title={null}
            footer={null}
            visible={this.state.isModalOpen}
            onCancel={this.ConfirmationModalhandleCancel}
            width="fit-content"
            bodyStyle={{ padding: '0' }}
        >
            {this.getVideo()}
        </Modal>
            )
        }
        
        render() {
            return (
                <div>
                    {this.getIntroVideoModal()}
                </div>
            )
        }
    }

    export default demo

我观察到 console.log("Modal state", this.state.isModalOpen) 在模态关闭但播放器继续播放时安慰错误。反应播放器版本：2.6.2 和 2.9.0。模式关闭后如何停止播放视频？

Answer 1

此问题特定于 antd modal。我尝试了 reactstrap modal 并且成功了。

Answer 2

朋友，你可以使用 Antd Modal 本身，这没有错。为了能够在模式关闭时停止视频播放，您必须通过属性

// add this property to your ant Modal    
destroyOnClose={true}

到模态框。这是我实现预期行为的另一种解决方法。谢谢

为什么 react-player 即使在 playing={false} 时也在播放视频？

why is react-player playing video even when playing={false}?

class

reactjs

antd

react-player