Switch to next video from Youtube API (React)

Switch to next video from Youtube API (React)

I am attempting to have the next video in a channel play right after the other. Currently, the website has the videos showing one after the other, but my goal is to show one video and the second one plays right after the other is done. I have the function set up for the video ending, but right now it just causes an alert. I am using the Youtube Data API to pull in the videos and their information.

I am attempting to have the next video in a channel play right after the other. Currently, the website has the videos showing one after the other, but my goal is to show one video and the second one plays right after the other is done. I have the function set up for the video ending, but right now it just causes an alert. I am using the Youtube Data API to pull in the videos and their information.

Here is a snippet of the code I am using:

constructor() {
super();
this.state = {
  videos: [],
};

}

componentDidMount() { fetch('https://www.googleapis.com/youtube/v3/search?key='APIKey'&channelId=UCXIJgqnII2ZOINSWNOGFThA&part=snippet,id&order=date&maxResults=2') .then(results => { return results.json(); }).then(data => { let videos = data.items.map((videos) => { return( <div key={videos.items}> <YouTube className="player" id="video" videoId={videos.id.videoId} opts={VIDEO_OPTS} onEnd={this.playNextVideo} /> <h2>{videos.snippet.title}</h2> <p className="channel">Video by: {videos.snippet.channelTitle}</p> </div> ); }); this.setState({videos: videos}); console.log("state", this.state.videos); })

}

playNextVideo = () => { alert('The video is done!'); }


Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Using an API with JavaScript (A Beginners Guide to API)

If you are faced with the task of accessing the API in your JavaScript application and don’t know where to start, this article will help you figure it out quickly.

Working with Data and APIs in JavaScript - Hiding API Keys

We will address how to can hide an API key using environment variables and open source the code on GitHub. Learn how to work with data in web applications and the basics of server-side programming with Node. Working with Data and APIs in JavaScript!

Working with Data and APIs in JavaScript - Geolocation Web API

Welcome to Working with Data and APIs in Javascript! Before diving into communication between client and server (GET and POST requests), let's look at the Geolocation Web API with navigator.geolocation. Learn how to work with data in web applications and the basics of server-side programming with Node.