JSFiddle - React, Tailwind, and code Playground

HTML

<video id="my_video" width="640" height="480" autoplay>
    <source src="files/1.webm" type="video/webm">
</video>
    
<video id="my_video1" width="640" height="480" style="display:none">
    <source src="files/1.webm" type="video/webm">
</video>

JavaScript

var videos = ['http://video.webmfiles.org/big-buck-bunny_trailer.webm','http://video.webmfiles.org/elephants-dream.webm'];

var src = 0,intTime='';
var video = document.getElementById("my_video");
video.src = videos[0];
document.querySelector("#my_video").addEventListener("ended", nextVideo, false);

function nextVideo() {
    src = src + 1;
    video.src = videos[src];
    //video.play();
}

video.ontimeupdate = function timeUp(e){
    
    if(parseInt(e.originalTarget.duration - e.originalTarget.currentTime)==1){
        document.getElementById("my_video1").src=videos[1];
        document.getElementById("my_video1").play();
        document.getElementById("my_video1").onloadeddata = function(){
            clearInterval('intTime');
            intTime = setTimeout(function(){document.getElementById("my_video").style.display="none";
            document.getElementById("my_video1").style.display="block";},1000);
            
        };
    }
        
}