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>
Zitieren
Zitat von RedDevil
