refactor(website): optimise video loading

brucehsu · brucehsu · commit 36fb528362de · 2026-03-10T01:22:50.000Z
diff --git a/apps/website/index.html b/apps/website/index.html
@@ -10,6 +10,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="/src/style.css" />
+    <link rel="preload" href="/videos/overview.mp4" as="video" type="video/mp4" />
   </head>
   <body>
     <!-- Hero + Product Viewer -->
@@ -71,14 +72,14 @@ <h1 class="hero-title">Codelegate</h1>
             <!-- Overview -->
             <div class="pv-tour active" data-tour-panel="overview">
               <div class="pv-tour-media">
-                <video class="pv-video" autoplay muted playsinline src="/videos/overview.mp4"></video>
+                <video class="pv-video" autoplay muted playsinline preload="auto" src="/videos/overview.mp4"></video>
               </div>
             </div>
 
             <!-- Agent Support -->
             <div class="pv-tour" data-tour-panel="agents">
               <div class="pv-tour-media">
-                <video class="pv-video" muted playsinline src="/videos/agents.mp4"></video>
+                <video class="pv-video" muted playsinline preload="none" data-src="/videos/agents.mp4"></video>
               </div>
               <div class="pv-tour-text">
                 <h2 class="pv-tour-headline">Supports Claude Code and Codex CLI</h2>
@@ -89,7 +90,7 @@ <h2 class="pv-tour-headline">Supports Claude Code and Codex CLI</h2>
             <!-- Git Worktree -->
             <div class="pv-tour" data-tour-panel="worktree">
               <div class="pv-tour-media">
-                <video class="pv-video" muted playsinline src="/videos/gitworktree.mp4"></video>
+                <video class="pv-video" muted playsinline preload="none" data-src="/videos/gitworktree.mp4"></video>
               </div>
               <div class="pv-tour-text">
                 <h2 class="pv-tour-headline">Git Worktree Management</h2>
@@ -100,7 +101,7 @@ <h2 class="pv-tour-headline">Git Worktree Management</h2>
             <!-- Keyboard Navigation -->
             <div class="pv-tour" data-tour-panel="keyboard">
               <div class="pv-tour-media">
-                <video class="pv-video" muted playsinline src="/videos/keyboard.mp4"></video>
+                <video class="pv-video" muted playsinline preload="none" data-src="/videos/keyboard.mp4"></video>
               </div>
               <div class="pv-tour-text">
                 <h2 class="pv-tour-headline">Full Keyboard Navigation</h2>
@@ -111,7 +112,7 @@ <h2 class="pv-tour-headline">Full Keyboard Navigation</h2>
             <!-- All TUI Tools -->
             <div class="pv-tour" data-tour-panel="tui">
               <div class="pv-tour-media">
-                <video class="pv-video" muted playsinline src="/videos/cli.mp4"></video>
+                <video class="pv-video" muted playsinline preload="none" data-src="/videos/cli.mp4"></video>
               </div>
               <div class="pv-tour-text">
                 <h2 class="pv-tour-headline">Use Whatever All TUI Tools You Like</h2>
diff --git a/apps/website/src/main.js b/apps/website/src/main.js
@@ -30,19 +30,36 @@ navItems.forEach((btn) => {
   }
 });
 
-// Play video in panel, pause all others; restart from beginning
+// Play video in panel, pause all others; lazy-load src on first access
 function playVideoInPanel(panel) {
   panels.forEach((p) => {
     const v = p.querySelector("video");
     if (v) v.pause();
   });
   const video = panel.querySelector("video");
   if (video) {
+    // Lazy-load: move data-src to src on first play
+    if (!video.src && video.dataset.src) {
+      video.src = video.dataset.src;
+    }
     video.currentTime = 0;
     video.play();
   }
 }
 
+// After overview finishes loading, prefetch the other videos in background
+const overviewVideo = panels.get("overview").querySelector("video");
+overviewVideo.addEventListener("canplaythrough", () => {
+  panels.forEach((panel, key) => {
+    if (key === "overview") return;
+    const v = panel.querySelector("video");
+    if (v && !v.src && v.dataset.src) {
+      v.preload = "auto";
+      v.src = v.dataset.src;
+    }
+  });
+}, { once: true });
+
 // 2-second delay before looping: pause at end, then restart after 2s
 document.querySelectorAll(".pv-video").forEach((video) => {
   video.loop = false; // we handle looping manually
@@ -53,7 +70,7 @@ document.querySelectorAll(".pv-video").forEach((video) => {
         video.currentTime = 0;
         video.play();
       }
-    }, 2000);
+    }, 3000);
   });
 });
 
