Fix unreliable video loading and reduce media size

README.md

@@ -14,7 +14,7 @@ license: other
 
 This public Space runs an anonymous, randomized perceptual study over ten cases and five motion-generation methods. All cases appear on one scrollable page, with six large videos per case in a three-column grid: five anonymized samples plus a green ground-truth reference. Participants drag compact blocks to rank the five generated samples for three criteria. Method names are not present in the participant-facing interface or media paths.
 
-Survey videos are encoded consistently at 960 pixels wide with high-quality H.264 settings and their original audio stream, then optimized for browser fast-start playback. Players use the Space's same-origin media route with `preload="none"`, so a browser requests a video only when the participant chooses to play it. This avoids starting 60 video downloads at once and avoids cross-origin media failures.
+Survey videos are encoded consistently at 960 pixels wide with high-quality H.264 settings and their original audio stream, then optimized for browser fast-start playback. Players use the Space's same-origin media route with `preload="none"`, so a browser requests a video only when the participant chooses to play it. Lightweight preview posters keep every player visible before playback without starting 60 video downloads at once.
 
 The app intentionally refuses to start a live survey if any of the ten ground-truth files is missing. See `GROUND_TRUTH_SETUP.md`.
 

app.py

@@ -233,8 +233,14 @@ def video_card(label, relative_path, is_ground_truth=False):
             "Add it before publishing the survey.</div>"
         )
     else:
+        poster_path = Path(relative_path).with_suffix(".jpg").as_posix()
+        poster_file = BASE_DIR / poster_path
+        poster_attr = (
+            f" poster='{media_url(poster_path)}'" if poster_file.is_file() else ""
+        )
         body = (
-            f"<video controls preload='none' playsinline src='{media_url(relative_path)}'>"
+            f"<video controls preload='none' playsinline{poster_attr} "
+            f"src='{media_url(relative_path)}'>"
             "Your browser does not support video playback.</video>"
         )
     return (