79 lines
1.8 KiB
HTML
79 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html onclick="videoplayer.muted = false">
|
|
<head>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background-color: black;
|
|
}
|
|
#videoplayer {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
transform: translate(-50%, -50%);
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<video id="videoplayer"></video>
|
|
<script>
|
|
|
|
var playlist;
|
|
|
|
async function nowPlaying() {
|
|
if (!playlist || Date.now() > playlist.timestamp + playlist.totalDuration*1000) {
|
|
playlist = await fetch("playlist").then(res => res.json());
|
|
}
|
|
for (var i = 0, pastDurations = 0; i < playlist.videos.length; i++) {
|
|
var video = playlist.videos[i];
|
|
var videoDurationMs = video.duration * 1000;
|
|
if (Date.now() < playlist.timestamp + pastDurations + videoDurationMs) {
|
|
break;
|
|
}
|
|
pastDurations += videoDurationMs;
|
|
}
|
|
return {
|
|
name: video.name,
|
|
position: (Date.now() - pastDurations - playlist.timestamp) / 1000
|
|
};
|
|
}
|
|
|
|
async function sync(force) {
|
|
var {name, position} = await nowPlaying();
|
|
var src = encodeURI(`videos/${name}`);
|
|
|
|
if (!videoplayer.src.endsWith(src)) {
|
|
console.debug("change src", videoplayer.src, "to", src);
|
|
videoplayer.src = src;
|
|
videoplayer.load();
|
|
}
|
|
|
|
console.debug("desync", Math.abs(videoplayer.currentTime - position) * 1000, "ms");
|
|
|
|
if (force || Math.abs(position - videoplayer.currentTime) >= 0.5) {
|
|
console.debug("change pos", videoplayer.currentTime, "to", position);
|
|
console.time("set pos");
|
|
videoplayer.currentTime = position;
|
|
console.timeEnd("set pos");
|
|
}
|
|
|
|
if (videoplayer.paused) try {
|
|
await videoplayer.play();
|
|
} catch (error) {
|
|
videoplayer.muted = true;
|
|
await videoplayer.play();
|
|
}
|
|
}
|
|
|
|
sync();
|
|
setInterval(sync, 5000);
|
|
|
|
videoplayer.addEventListener("ended", () => {
|
|
console.debug("ended");
|
|
sync();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |