das hier sollte funktionieren.... ersetze einfach deine 'data' durch deine videos.
Code:
<!DOCTYPE html>
<html>
<head>
	<title>Player</title>
	<style type="text/css">
		body{
			font-family: sans-serif;
			padding: 10px;
			margin: 0px;
		}

		video{
			height: 400px;
		}


		ul,li{
			list-style-type: none;
			padding: 0px;
			margin: 0px;
			display: inline-block;
		}
	</style>
</head>
<body>
<h1></h1>
<div><video controls src="mov_bbb.mp4" /></div>
<ul>
	<li><button>prev</button></li>
	<li><button>random</button></li>
	<li><button>next</button></li>
</ul>

<script>
	let data = [
		{title: "movie one", src: "https://www.w3schools.com/html/mov_bbb.mp4"},
		{title: "movie two", src: "https://www.w3schools.com/html/movie.mp4"}
	];

	let actId = 0;

	let loadMovie = (id) => {
		if (id < 0) id = 0;
		if (id > data.length - 1) id = data.length - 1;
		document.querySelectorAll("button")[0].disabled = (id == 0) ? true : false;
		document.querySelectorAll("button")[2].disabled = (id == data.length - 1) ? true : false;
		document.querySelector("h1").innerText = data[id].title;
		document.querySelector("video").src = data[id].src;
		actId = id;
	};

	document.querySelectorAll("button")[0].onclick = () => {loadMovie(--actId)};
	document.querySelectorAll("button")[1].onclick = () => {loadMovie(Math.random() * data.length>>0)};
	document.querySelectorAll("button")[2].onclick = () => {loadMovie(++actId)};

	loadMovie(0);


</script>

</body>
</html>