Video Playlist

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>

video {
width:600px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
border:5px solid red;
padding:5px;
cursor:pointer;
}

#h1, #h2 {
position:absolute;
top:5%;
left:50%;
transform:translate(-50%,-5%);
font-size:40px;
font-family:arial;
}

</style>
</head>
<body>

<h1 id='h1'></h1>
<h1 id='h2'></h1>

<a href='1.mp4'></a>
<a href='2.mp4'></a>
<a href='3.mp4'></a>
<a href='4.mp4'></a>
<a href='5.mp4'></a>


<video id='video'></video>


<script>

Default = 0;
counter = 1;
i = 0;

          x = document.getElementsByTagName('a');

video.src = x[i];

video.onclick = function(){
if( Default == 0 ){
Default = 1;
video.controls = true;
video.load();
video.play();
h1.innerHTML = 'Now playing Video ' + counter;
}
}


video.onended=()=>{

     i++;
     counter++;
     video.src = x[i];
     video.play();
     h1.innerHTML = 'Now playing Video ' + counter;

        if( i == x.length ){
             i = 0;
             video.src = x[i];
             video.play();
             h2.innerHTML = 'Loop mode now active';
             h1.style.display = 'none';
}

        if( counter == x.length ){
            counter = 0;
}
}


</script>
</body>
</html>