Update assets/js/video_segment.js

assets/js/video_segment.js

@@ -162,7 +162,47 @@ function attachLabeledLoop(videoEl, { label, startFrame, endFrame, fps = DEFAULT
     // No snapping during seek; we only enforce the window when time reaches endSec.
 }
 
+/**
+ * Lazily loads a video source when the element is near viewport.
+ * Expects markup like:
+ *   <video ...><source data-src="..." type="video/mp4"></video>
+ */
+function setupLazyVideo(videoEl, { rootMargin = "300px 0px", threshold = 0.01 } = {}) {
+    if (!videoEl) return;
+
+    const sourceEl = videoEl.querySelector("source[data-src]");
+    if (!sourceEl) return;
+
+    let loaded = false;
+
+    function loadNow() {
+        if (loaded) return;
+        const src = sourceEl.dataset.src;
+        if (!src) return;
+        sourceEl.src = src;
+        sourceEl.removeAttribute("data-src");
+        videoEl.load();
+        loaded = true;
+    }
+
+    if (!("IntersectionObserver" in window)) {
+        loadNow();
+        return;
+    }
+
+    const observer = new IntersectionObserver((entries) => {
+        for (const entry of entries) {
+            if (!entry.isIntersecting) continue;
+            loadNow();
+            observer.unobserve(videoEl);
+            break;
+        }
+    }, { root: null, rootMargin, threshold });
+
+    observer.observe(videoEl);
+}
+
 window.DEFAULT_FPS = DEFAULT_FPS;
 window.attachLabeledLoop = attachLabeledLoop;
 window.computeWindowFrames = computeWindowFrames;
-
+window.setupLazyVideo = setupLazyVideo;