diff --git a/lerobot/html_dataset_visualizer/src/components/videos-player.tsx b/lerobot/html_dataset_visualizer/src/components/videos-player.tsx
index 52aec46e1..69c31b137 100644
--- a/lerobot/html_dataset_visualizer/src/components/videos-player.tsx
+++ b/lerobot/html_dataset_visualizer/src/components/videos-player.tsx
@@ -165,18 +165,24 @@ export const VideosPlayer = ({
     const onCanPlayThrough = () => {
       videosReadyCount += 1;
       if (videosReadyCount === videosInfo.length) {
-        // Start autoplay when all videos are ready
         if (typeof onVideosReady === "function") {
           onVideosReady();
           setIsPlaying(true);
         }
       }
     };
+  
     videoRefs.current.forEach((video) => {
       if (video) {
-        video.addEventListener("canplaythrough", onCanPlayThrough);
+        // If already ready, call the handler immediately
+        if (video.readyState >= 4) {
+          onCanPlayThrough();
+        } else {
+          video.addEventListener("canplaythrough", onCanPlayThrough);
+        }
       }
     });
+  
     return () => {
       videoRefs.current.forEach((video) => {
         if (video) {
@@ -185,7 +191,7 @@ export const VideosPlayer = ({
       });
     };
   }, []);
-
+  
   return (
     <>
       {/* Error message */}