HTML video playlist + loop

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
video {  width:978px;display:none;padding:5px;  }
.video_frame {  border:20px solid maroon;display:inline-block; }

</style>
</head>
<body>

<center><div class='video_frame'>
<video id='video' controls></video>
<a href='1.mp4' ></a>
<a href='2.mp4' ></a>
<a href='3.mp4' ></a>
</div></center>


<script>
i=0;
x = document.getElementsByTagName('a');
video.src=x[i];
video.play();
video.style.display='block';

video.onended=function(){
video.style.display='none';
      i++;
      video.src=x[i];
      video.play();
      video.style.display='block';
if(i > 2){
      i=0;
      video.src=x[i];
      video.play();
}
}


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