第一次完成后添加另一个视频 - 反应

如何解决第一次完成后添加另一个视频 - 反应

我的 React 应用中有两个视频作为“背景”。第一个完成后，我希望第二个开始，然后继续循环（仅适用于第二个视频）。我真的不知道如何实现这一目标。我尝试过的是以下内容，但是它只会播放第一个。我想知道是否有人知道如何实现这一目标？

function VideoPlay() {

    var myvideotest = TestVideo1

    // Callback function 
    const playNext2 = () => {
        myvideotest = TestVideo2
    }
    

    return (
        <div className={classes.Container} >
            <video autoplay="autoplay" muted className={classes.Video} onEnded={playNext2}>
                <source src={myvideotest} type="video/mp4" />
            </video>


            <div className={classes.Content}>
           
                <div className={classes.SubContent} >
                    
                   
                </div>
            </div>
        </div>

    )

}

编辑 所以我找到了解决方案，首先我重新实现了使用变化的状态，并将视频src移动到标签，否则在重新渲染时它会被忽略

class VideoPlayer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentUrlIdx: 0,loopVal: '',}

        this.handleEnded = this.handleEnded.bind(this);
    }

    handleEnded(e) {
        const nextUrlIdx = (this.state.currentUrlIdx + 1) % urls.length

        const loopValtest="loop";
        this.setState({currentUrlIdx: nextUrlIdx,loopVal: loopValtest})
    }

    render() {
        console.log("render() method");
        console.log(urls[this.state.currentUrlIdx]);
        console.log(this.state.loopVal)
        return (
        <div className={classes.Container} >
            <video autoplay="autoplay" muted loop={this.state.loopVal} className={classes.Video} onEnded={this.handleEnded} src={urls[this.state.currentUrlIdx]} type="video/mp4">
                
            </video>


            <div className={classes.Content}>
           
                <div className={classes.SubContent} >
                    <h>{this.state.currentUrlIdx}</h>
                   
                </div>
            </div>
        </div>          
        )
    }
}