How can I play a video in array in react js

Question

I want play video in array loop. When I click next button, the video will play next. But it does not work.I do not know whether the problem exist here: url={Array[this.state.currentVideo]}

constructor(props){
        super(props);
        this.state={
            repeat:false,
            paused:false,
            uid: uuid.v1(),
            answers: {
                answer:'',
            currentVideo:0,
            },

            isSubmitted: false
        };

        this.answerSelected =this.answerSelected.bind(this);
        this.questionsSubmit = this.questionsSubmit.bind(this);
        this.nextVideo = this.nextVideo.bind(this);
    }

    nextVideo(){
        if(this.state.currentVideo != Array.length-1){
            this.setState({currentVideo:this.state.currentVideo + 1});}
        else{
            this.setState({currentVideo:0});
        } 

        }

 return(

            <div >
                <h1>Experiment</h1>
          <h3>Task 2</h3>
          <p>In Task 2, you will see 10 videos as before, you should select which video you think is fake and which one is real. </p>


                        <div className="video">
                        <ReactPlayer  url={Array[this.state.currentVideo]} playing/>
                        </div>
                {questions}
                {/* <input onChange={this.nextVideo} className="button" type="submit" value="Next" /> */}


            </div>

Answer 1

You can try something like this-

import React from "react";

export default class Videos extends React.Component {
  constructor(props) {
    super(props);
    this.playNext = this.playNext.bind(this);
    this.state = {
      current: 0,
      videos: [
        {
          description:
            "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\n\nLicensed under the Creative Commons Attribution license\nhttp://www.bigbuckbunny.org",
          sources:
            "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
          subtitle: "By Blender Foundation",
          thumb: "images/BigBuckBunny.jpg",
          title: "Big Buck Bunny"
        },
        {
          description: "The first Blender Open Movie from 2006",
          sources:
            "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
          subtitle: "By Blender Foundation",
          thumb: "images/ElephantsDream.jpg",
          title: "Elephant Dream"
        },
        {
          description:
            "HBO GO now works with Chromecast -- the easiest way to enjoy online video on your TV. For when you want to settle into your Iron Throne to watch the latest episodes. For $35.\nLearn how to use Chromecast with HBO GO and more at google.com/chromecast.",
          sources:
            "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
          subtitle: "By Google",
          thumb: "images/ForBiggerBlazes.jpg",
          title: "For Bigger Blazes"
        }
      ]
    };
  }
  playNext() {
    this.setState({ current: this.state.current + 1 });
  }
  render() {
    return (
      <div>
        <button onClick={this.playNext}>Next</button>
        <div>
          <div>{this.state.videos[this.state.current].description}</div>
          <div>{this.state.videos[this.state.current].title}</div>
          <video
            src={this.state.videos[this.state.current].sources}
            autoPlay
            controls
          />
        </div>
      </div>
    );
  }
}

https://codesandbox.io/s/react-video-loop-hi26q

Answer 2

"Array" is a built-in JavaScript object and you should avoid using it like name variable. It is constructor.

I would implement video in loop like this:

    import React from "react";
    import v1 from "./videos/1.mp4";
    import v2 from "./videos/2.mp4";
    import v3 from "./videos/3.mp4";

    const App = () => {
        const videos = [v1, v2, v3];
        const [current, setCurrent] = React.useState(0);

        return (
            <div className="App">            
                <video src={videos[current]} autoPlay controls />
                <p>Current video is: {current}</p>
                <button onClick={() => setCurrent(current < 2 ? current + 1 : 0)}>
                    Next Video
                </button>
            </div>
       );
    };
    export default App;