Fix video loading time, prebuffer vids

demo/demo.js

@@ -208,21 +208,22 @@ async function renderDemo(data, container, optimizedOrg, dataFile, modelColors)
     const videoWrap = document.createElement("div");
     videoWrap.className = "demo-video-wrap";
 
-    function makeVideoEl() {
+    // Pre-create and buffer a <video> element for every clip
+    const clipVideos = clips.map(clip => {
+        if (!clip.video) return null;
         const v = document.createElement("video");
         v.loop = true;
         v.muted = true;
         v.playsInline = true;
         v.preload = "auto";
         v.className = "demo-video";
+        v.style.opacity = "0";
+        v.src = clip.video;
+        videoWrap.appendChild(v);
         return v;
-    }
+    });
 
-    let videoA = makeVideoEl();
-    let videoB = makeVideoEl();
-    videoB.style.opacity = "0";
-    videoWrap.appendChild(videoA);
-    videoWrap.appendChild(videoB);
+    let activeVideoIdx = -1;
 
     const arrowLeft = document.createElement("button");
     arrowLeft.className = "demo-arrow demo-arrow-left";
@@ -238,8 +239,6 @@ async function renderDemo(data, container, optimizedOrg, dataFile, modelColors)
     videoWrap.appendChild(arrowRight);
     card.appendChild(videoWrap);
 
-    let isFirstClip = true;
-
     // Device selector (centered under video)
     card.appendChild(deviceSelector);
 
@@ -348,51 +347,36 @@ async function renderDemo(data, container, optimizedOrg, dataFile, modelColors)
         clipSetup.textContent = clip.inference_setup || "";
         clipSetup.style.display = clip.inference_setup ? "" : "none";
 
-        // Video — crossfade: keep old visible, load new behind, fade when frame ready
-        if (clip.video) {
+        // Video — switch between pre-buffered video elements
+        const newVideo = clipVideos[currentClipIdx];
+        if (newVideo) {
             videoWrap.style.display = "";
-            if (isFirstClip) {
-                // First clip: just load directly into videoA
-                videoA.src = clip.video;
-                videoA.style.opacity = "1";
-                videoA.load();
-                videoA.addEventListener("loadeddata", () => videoA.play(), { once: true });
-                isFirstClip = false;
+            const oldVideo = activeVideoIdx >= 0 ? clipVideos[activeVideoIdx] : null;
+
+            const showNew = () => {
+                newVideo.style.opacity = "1";
+                newVideo.play();
+                if (oldVideo && oldVideo !== newVideo) {
+                    oldVideo.style.opacity = "0";
+                    oldVideo.pause();
+                    oldVideo.currentTime = 0;
+                }
+                activeVideoIdx = currentClipIdx;
+            };
+
+            // If enough data is buffered, show immediately; otherwise wait
+            if (newVideo.readyState >= 3) {
+                showNew();
             } else {
-                // Crossfade: videoA is the old (visible), videoB gets the new source
-                videoB.src = clip.video;
-                videoB.style.opacity = "0";
-                videoB.load();
-
-                videoB.addEventListener("loadeddata", function onLoaded() {
-                    videoB.removeEventListener("loadeddata", onLoaded);
-                    videoB.play();
-
-                    // Wait for actual frame render before fading
-                    const startFade = () => {
-                        videoB.style.opacity = "1";
-                        videoA.style.opacity = "0";
-                        // After transition, pause old and swap roles
-                        setTimeout(() => {
-                            videoA.pause();
-                            videoA.removeAttribute("src");
-                            videoA.load();
-                            // Swap roles
-                            const tmp = videoA;
-                            videoA = videoB;
-                            videoB = tmp;
-                        }, 300);
-                    };
-
-                    if (videoB.requestVideoFrameCallback) {
-                        videoB.requestVideoFrameCallback(startFade);
-                    } else {
-                        startFade();
-                    }
-                });
+                newVideo.addEventListener("canplay", showNew, { once: true });
             }
         } else {
             videoWrap.style.display = "none";
+            if (activeVideoIdx >= 0 && clipVideos[activeVideoIdx]) {
+                clipVideos[activeVideoIdx].style.opacity = "0";
+                clipVideos[activeVideoIdx].pause();
+            }
+            activeVideoIdx = -1;
         }
 
         // Prompt
@@ -422,6 +406,7 @@ async function renderDemo(data, container, optimizedOrg, dataFile, modelColors)
         renderOutputs();
 
         updateArrows();
+
     }
 
     // ── Toggle open/close ───────────────────────────────────────────────