Javascript 从一系列视频ID播放YouTube视频：React import React，{Component}来自'React'； 从“react YouTube”导入YouTube； 让videoIdList=[“XM-HJT8_esM”，“AOMpxsiUg2Q”]； var videoId=videoIdList[0]； 设i=0； 类YouTueplayer扩展组件{ render（）{ 常量选项={ 高度：“390”， 宽度：“640”， PlayerBars:{//https://developers.google.com/youtube/player_parameters 自动播放：1 } }; 返回( ); } _onReady（事件）{ //通过event.target访问所有事件处理程序中的播放器 event.target.playVideo（videoIdList[i]） } _ONED（活动）{ videoId=videoIdList[i] event.target.playVideo（videoIdList[++i]）； 控制台日志（videoId）； } } 导出默认YoutubePlayer；

所以我尝试从一系列视频ID播放youtube视频。当视频结束时，我想将视频更改为列表中的下一个视频。如何才能做到这一点？

您必须保持当前播放视频的内部状态，一旦视频结束，您必须将下一个视频设置为状态，该状态将再次重新渲染组件并开始下一个视频。下面的代码应该可以工作

import React, { Component } from 'react';
import YouTube from 'react-youtube';
let videoIdList=["XM-HJT8_esM","AOMpxsiUg2Q"];
var videoId = videoIdList[0];
let i=0;
class YoutubePlayer extends Component {
    render() {
        const opts = {
            height: '390',
            width: '640',
            playerVars: { // https://developers.google.com/youtube/player_parameters
                autoplay: 1
            }
        };

        return (
            <YouTube
                videoId={videoId}
                opts={opts}
                onReady={this._onReady}
                onEnd={this._onEnd}
            />
        );
    }

    _onReady(event) {
        // access to player in all event handlers via event.targe
        event.target.playVideo(videoIdList[i])
    }

    _onEnd(event) {
        videoId = videoIdList[i]
        event.target.playVideo(videoIdList[++i]);
        console.log(videoId);
    }
}
export default YoutubePlayer;

从“React”导入React；
从“react dom”导入react dom；
从“@u-wave/react YouTube”导入YouTube；
导入“/styles.css”；
让videoIdList=[“AOMpxsiUg2Q”、“XM-HJT8_esM”、“AOMpxsiUg2Q”]；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
这个。i=0；
}
componentDidMount（）{
this.setState（{videoId:videoIdList[this.i]}）；
}
render（）{
常量选项={
高度：“390”，
宽度：“640”，
PlayerBars:{//https://developers.google.com/youtube/player_parameters
自动播放：1
}
};
返回(
);
}
_onEnd=（）=>{
this.setState（{videoId:videoIdList[++this.i]}）；
}
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(

import React from "react";
import ReactDOM from "react-dom";
import YouTube from '@u-wave/react-youtube';
import "./styles.css";
let videoIdList=["AOMpxsiUg2Q","XM-HJT8_esM","AOMpxsiUg2Q"];

class App extends React.Component {

constructor(props){
super(props);
this.state = {};
this.i = 0;
}

componentDidMount() {
  this.setState({videoId: videoIdList[this.i]});
}

render() {
    const opts = {
        height: '390',
        width: '640',
        playerVars: { // https://developers.google.com/youtube/player_parameters
            autoplay: 1
        }
    };

    return (
        <YouTube
            video={this.state.videoId}
            opts={opts}
            onReady={this._onReady}
            onEnd={this._onEnd}
        />
    );
}

_onEnd = () => {
    this.setState({videoId: videoIdList[++this.i]});
 }

}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);