JSFiddle - React, Tailwind, and code Playground

by HcJanni

HTML

<section id="home" class="section sectionhome">
      <div id="videoContainer">
	 
    <video autoplay muted id="video1" class="video1">
        <source src="video1.mp4" type="video/mp4">
    </video>
    <video muted id="video2" class="video2">
        <source src="video2.mp4" type="video/mp4">
    </video>
    <video muted id="video3" class="video3">
        <source src="video3.mp4" type="video/mp4">
    </video>
    <video muted id="video4" class="video4">
        <source src="video4.mp4" type="video/mp4">
    </video>
	    <video muted id="video5" class="video5">
        <source src="video5.mp4" type="video/mp4">
    </video>
	    <video muted id="video6" class="video6">
        <source src="video6.mp4" type="video/mp4">
    </video>
      </div>
    </section>
		  <button id="next">Click me</button>

JavaScript

let cnt = 0;
const container = document.getElementById("videoContainer");
const videos = container.querySelectorAll("video");
const next = num => {
  num = num || ++cnt;
  if (cnt>videos.length) cnt = 0; // wrap
  if (num>0) videos[nums-1].style.opacity=0;
    videos[num].style.opacity=1;
    video.src=videoArray[num].src
		video.play()
}; 
container.addEventListener("ended", next);

document.getElementById("next").addEventListener("click",next)