diff --git a/web/src/components/player/JSMpegPlayer.tsx b/web/src/components/player/JSMpegPlayer.tsx
index 91cd3e1c97..dfc56a6e0d 100644
--- a/web/src/components/player/JSMpegPlayer.tsx
+++ b/web/src/components/player/JSMpegPlayer.tsx
@@ -23,6 +23,7 @@ export default function JSMpegPlayer({
 }: JSMpegPlayerProps) {
   const url = `${baseUrl.replace(/^http/, "ws")}live/jsmpeg/${camera}`;
   const playerRef = useRef<HTMLDivElement | null>(null);
+  const videoRef = useRef(null);
   const internalContainerRef = useRef<HTMLDivElement | null>(null);
 
   const selectedContainerRef = useMemo(
@@ -86,7 +87,7 @@ export default function JSMpegPlayer({
       return;
     }
 
-    const video = new JSMpeg.VideoElement(
+    videoRef.current = new JSMpeg.VideoElement(
       playerRef.current,
       url,
       { canvas: `#${CSS.escape(uniqueId)}` },
@@ -99,17 +100,9 @@ export default function JSMpegPlayer({
         },
       },
     );
-
-    return () => {
-      if (playerRef.current) {
-        try {
-          video.destroy();
-          // eslint-disable-next-line no-empty
-        } catch (e) {}
-        playerRef.current = null;
-      }
-    };
-  }, [url, uniqueId, onPlaying]);
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [url, uniqueId]);
 
   return (
     <div className={className}>
diff --git a/web/src/components/player/MsePlayer.tsx b/web/src/components/player/MsePlayer.tsx
index 80844e7495..33ebbccf29 100644
--- a/web/src/components/player/MsePlayer.tsx
+++ b/web/src/components/player/MsePlayer.tsx
@@ -260,10 +260,14 @@ function MSEPlayer({
 
     return () => {
       onDisconnect();
+      if (bufferTimeout) {
+        clearTimeout(bufferTimeout);
+        setBufferTimeout(undefined);
+      }
     };
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [playbackEnabled, onDisconnect, onConnect]);
+  }, [playbackEnabled]);
 
   // check visibility