blob: 15ccd3e328568c588da8240ce48fcc0fb872675a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
(async () => {
const video = document.getElementById('background');
const fadeOverlay = document.getElementById('fadeOverlay');
const FADE_DURATION = 1000;
const resp = await fetch('/videos/videos.json');
if (!resp.ok) {
console.error('Failed to load videos.json');
return;
}
const videos = await resp.json();
let lastVideo = null;
function pickRandomVideo() {
if (videos.length === 1) return videos[0];
let choice;
do {
choice = videos[Math.floor(Math.random() * videos.length)];
} while (choice === lastVideo);
lastVideo = choice;
return choice;
}
async function playVideoLoop() {
while (true) {
const nextVideo = pickRandomVideo();
video.src = `/videos/${nextVideo}`;
video.style.opacity = '0';
fadeOverlay.style.opacity = '1';
await new Promise(r => setTimeout(r, FADE_DURATION));
video.load();
await new Promise(resolve => {
video.onloadedmetadata = () => resolve();
});
video.currentTime = 0;
video.play().catch(console.error);
video.style.opacity = '1';
fadeOverlay.style.opacity = '0';
await new Promise(r => setTimeout(r, (video.duration * 1000) - (2 * FADE_DURATION)));
fadeOverlay.style.opacity = '1';
video.style.opacity = '0';
await new Promise(r => setTimeout(r, FADE_DURATION));
}
}
playVideoLoop();
})();
|