sync player: shared draggable scrubber, tactile clips slaved to view clock

index.html

@@ -76,6 +76,16 @@ h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--sub)
 .vid video{width:100%;display:block;border-radius:8px;background:#000;aspect-ratio:2/1;object-fit:cover}
 .vid figcaption{font-size:11.5px;color:var(--sub);margin-top:4px;display:flex;justify-content:space-between}
 .vid .gtp{color:var(--accent2);font-weight:600}
+.ctrl{display:flex;align-items:center;gap:9px;margin-top:8px;padding:2px 2px 0}
+.pp{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);
+  background:var(--panel);color:var(--ink);font-size:12px;cursor:pointer;line-height:1;display:grid;place-items:center}
+.pp:hover{border-color:var(--accent)}
+.scrub{flex:1 1 auto;-webkit-appearance:none;appearance:none;height:5px;border-radius:999px;
+  background:var(--line);cursor:pointer;outline:none}
+.scrub::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;
+  background:var(--accent);border:2px solid var(--panel);box-shadow:0 1px 3px rgba(0,0,0,.3)}
+.scrub::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--panel)}
+.tlabel{flex:0 0 auto;font-size:11px;color:var(--sub);font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
 .empty{color:var(--sub);font-style:italic;padding:20px}
 footer{border-top:1px solid var(--line);padding:26px 0 50px;color:var(--sub);font-size:12.5px}
 .reading{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
@@ -163,101 +173,141 @@ footer{border-top:1px solid var(--line);padding:26px 0 50px;color:var(--sub);fon
       </div>
       <div class="pane" data-split="train"><div class="grid"><div class="scard"><div class="scard-h">sample 000</div><figure class="vid">
           <video src="media/v3/train/sample_000/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/v3/train/sample_000/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/v3/train/sample_000/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 001</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 001</div><figure class="vid">
           <video src="media/v3/train/sample_001/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/v3/train/sample_001/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/v3/train/sample_001/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 002</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 002</div><figure class="vid">
           <video src="media/v3/train/sample_002/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/v3/train/sample_002/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/v3/train/sample_002/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 003</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 003</div><figure class="vid">
           <video src="media/v3/train/sample_003/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/v3/train/sample_003/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/v3/train/sample_003/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div></div></div><div class="pane" data-split="val"><div class="grid"><div class="scard"><div class="scard-h">sample 000</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div></div></div><div class="pane" data-split="val"><div class="grid"><div class="scard"><div class="scard-h">sample 000</div><figure class="vid">
           <video src="media/v3/val/sample_000/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/v3/val/sample_000/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/v3/val/sample_000/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 001</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 001</div><figure class="vid">
           <video src="media/v3/val/sample_001/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/v3/val/sample_001/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/v3/val/sample_001/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 002</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 002</div><figure class="vid">
           <video src="media/v3/val/sample_002/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/v3/val/sample_002/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/v3/val/sample_002/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 003</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 003</div><figure class="vid">
           <video src="media/v3/val/sample_003/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/v3/val/sample_003/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/v3/val/sample_003/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div></div></div>
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div></div></div>
     </div>
         </div>
       </div>
@@ -325,101 +375,141 @@ footer{border-top:1px solid var(--line);padding:26px 0 50px;color:var(--sub);fon
       </div>
       <div class="pane" data-split="train"><div class="grid"><div class="scard"><div class="scard-h">sample 000</div><figure class="vid">
           <video src="media/causal/train/sample_000/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/causal/train/sample_000/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/causal/train/sample_000/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 001</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 001</div><figure class="vid">
           <video src="media/causal/train/sample_001/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/causal/train/sample_001/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/causal/train/sample_001/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 002</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 002</div><figure class="vid">
           <video src="media/causal/train/sample_002/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/causal/train/sample_002/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/causal/train/sample_002/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 003</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 003</div><figure class="vid">
           <video src="media/causal/train/sample_003/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/causal/train/sample_003/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/causal/train/sample_003/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div></div></div><div class="pane" data-split="val"><div class="grid"><div class="scard"><div class="scard-h">sample 000</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div></div></div><div class="pane" data-split="val"><div class="grid"><div class="scard"><div class="scard-h">sample 000</div><figure class="vid">
           <video src="media/causal/val/sample_000/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/causal/val/sample_000/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/causal/val/sample_000/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 001</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 001</div><figure class="vid">
           <video src="media/causal/val/sample_001/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/causal/val/sample_001/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/causal/val/sample_001/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 002</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 002</div><figure class="vid">
           <video src="media/causal/val/sample_002/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/causal/val/sample_002/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/causal/val/sample_002/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 003</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 003</div><figure class="vid">
           <video src="media/causal/val/sample_003/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/causal/val/sample_003/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/causal/val/sample_003/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div></div></div>
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div></div></div>
     </div>
         </div>
       </div>
@@ -487,107 +577,148 @@ footer{border-top:1px solid var(--line);padding:26px 0 50px;color:var(--sub);fon
       </div>
       <div class="pane" data-split="train"><div class="grid"><div class="scard"><div class="scard-h">sample 000</div><figure class="vid">
           <video src="media/contact/train/sample_000/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/contact/train/sample_000/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/contact/train/sample_000/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 001</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 001</div><figure class="vid">
           <video src="media/contact/train/sample_001/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/contact/train/sample_001/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/contact/train/sample_001/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 002</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 002</div><figure class="vid">
           <video src="media/contact/train/sample_002/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/contact/train/sample_002/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/contact/train/sample_002/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 003</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 003</div><figure class="vid">
           <video src="media/contact/train/sample_003/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/contact/train/sample_003/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/contact/train/sample_003/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div></div></div><div class="pane" data-split="val"><div class="grid"><div class="scard"><div class="scard-h">sample 000</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div></div></div><div class="pane" data-split="val"><div class="grid"><div class="scard"><div class="scard-h">sample 000</div><figure class="vid">
           <video src="media/contact/val/sample_000/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/contact/val/sample_000/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/contact/val/sample_000/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 001</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 001</div><figure class="vid">
           <video src="media/contact/val/sample_001/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/contact/val/sample_001/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/contact/val/sample_001/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 002</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 002</div><figure class="vid">
           <video src="media/contact/val/sample_002/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/contact/val/sample_002/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/contact/val/sample_002/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div><div class="scard"><div class="scard-h">sample 003</div><figure class="vid">
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div><div class="scard"><div class="scard-h">sample 003</div><figure class="vid">
           <video src="media/contact/val/sample_003/view.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto" data-lead="1"></video>
           <figcaption>middle view <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/contact/val/sample_003/tl.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · left <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
         </figure><figure class="vid">
           <video src="media/contact/val/sample_003/tr.mp4"
-                 autoplay loop muted playsinline preload="metadata"></video>
+                 muted playsinline preload="auto"></video>
           <figcaption>tactile · right <span class="gtp">GT&nbsp;·&nbsp;pred</span></figcaption>
-        </figure></div></div></div>
+        </figure>
+      <div class="ctrl">
+        <button class="pp" aria-label="play/pause">▶</button>
+        <input class="scrub" type="range" min="0" max="1000" value="0" step="1" aria-label="scrub">
+        <span class="tlabel">0/16</span>
+      </div></div></div></div>
     </div>
         </div>
       </div>
     </section></main>
 <footer><div>Visuo-tactile world model · decoded with Cosmos CV4x8x8 · GT&nbsp;|&nbsp;pred videos are future-half predictions (history skipped for metrics).</div></footer>
 <script>
+// ---- train/val toggle ----
 document.querySelectorAll('.qual').forEach(q=>{
   const panes=q.querySelectorAll('.pane'), btns=q.querySelectorAll('.seg-b');
   function sel(t){panes.forEach(p=>p.classList.toggle('show',p.dataset.split===t));
@@ -595,5 +726,30 @@ document.querySelectorAll('.qual').forEach(q=>{
   btns.forEach(b=>b.addEventListener('click',()=>sel(b.dataset.t)));
   sel('train');
 });
+// ---- per-sample synchronized player: the middle-view clip is the clock leader;
+//      the two tactile clips are continuously slaved to its currentTime, so
+//      vision and (latency-corrected) tactile always display the same frame. ----
+const FPS=6;
+document.querySelectorAll('.scard').forEach(card=>{
+  const vids=[...card.querySelectorAll('video')];
+  const lead=card.querySelector('video[data-lead]')||vids[0];
+  const bar=card.querySelector('.scrub'), btn=card.querySelector('.pp'), lbl=card.querySelector('.tlabel');
+  let userPaused=false, visible=false, dur=0, nF=16;
+  function seekAll(t){vids.forEach(v=>{if(Math.abs(v.currentTime-t)>0.03){try{v.currentTime=t;}catch(e){}}});}
+  function paint(){const t=lead.currentTime; if(dur) bar.value=Math.round(t/dur*1000);
+    lbl.textContent=Math.min(Math.round(t*FPS),nF)+'/'+nF;}
+  lead.addEventListener('loadedmetadata',()=>{dur=lead.duration||0;nF=Math.max(1,Math.round(dur*FPS));paint();});
+  lead.addEventListener('timeupdate',()=>{ // relock the tactile clips to the leader every tick
+    vids.forEach(v=>{if(v!==lead&&Math.abs(v.currentTime-lead.currentTime)>0.05){try{v.currentTime=lead.currentTime;}catch(e){}}});
+    paint();});
+  lead.addEventListener('ended',()=>{seekAll(0); if(!userPaused&&visible) playAll();}); // synced loop
+  function playAll(){btn.textContent='⏸';vids.forEach(v=>v.play().catch(()=>{}));}
+  function pauseAll(){btn.textContent='▶';vids.forEach(v=>v.pause());}
+  btn.addEventListener('click',()=>{ if(lead.paused){userPaused=false;playAll();} else {userPaused=true;pauseAll();} });
+  bar.addEventListener('input',()=>{userPaused=true;pauseAll();seekAll(parseInt(bar.value,10)/1000*(dur||0));paint();});
+  // decode only what's on screen (avoids 70+ simultaneous decoders)
+  new IntersectionObserver(es=>es.forEach(e=>{visible=e.isIntersecting;
+    if(visible&&!userPaused) playAll(); else if(!visible) pauseAll();}),{threshold:0.25}).observe(card);
+});
 </script>
 </body></html>