adding looping, fade in-out videos

1 files changed, 55 insertions, 0 deletions

diff --git a/templates/var/www/html/video-background.js b/templates/var/www/html/video-background.js
new file mode 100644
index 0000000..15ccd3e
--- /dev/null
+++ b/templates/var/www/html/video-background.js
@@ -0,0 +1,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();
+})();