Question

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;

因此，我正在尝试播放来自一系列视频ID的youtube视频。视频结束时，我想将视频更改为列表中的下一个视频。我该怎么办？

Answer 1

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

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);

您可以在此处查看工作代码- https://codesandbox.io/s/7yk0vrzr36

播放来自一系列视频ID的YouTube视频：React

1 个答案: