diff --git a/web/src/components/player/LivePlayer.tsx b/web/src/components/player/LivePlayer.tsx
index 6f9c94583d..11ebb78908 100644
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -238,20 +238,20 @@ export default function LivePlayer({
     cameraActive,
   ]);
 
-  useEffect(() => {
-    setLiveReady(false);
-  }, [preferredLiveMode]);
-
   const [key, setKey] = useState(0);
 
-  // the stream is part of the MSE and WebRTC keys, so a stream change
-  // remounts them in the same render and the new player is hidden until it
-  // plays. jsmpeg plays the camera, not the stream, and keeps playing
-  const [renderedStream, setRenderedStream] = useState(streamName);
+  // a stream or mode change remounts the player in the same render, and the
+  // new player is hidden until it plays. jsmpeg plays the camera, not the
+  // stream, so a stream change alone keeps it playing
+  const [renderedPlayer, setRenderedPlayer] = useState({
+    stream: streamName,
+    mode: preferredLiveMode,
+  });
   const [switchFrame, setSwitchFrame] = useState<HTMLCanvasElement>();
-  if (renderedStream !== streamName) {
-    setRenderedStream(streamName);
-    if (preferredLiveMode !== "jsmpeg") {
+  const modeChanged = renderedPlayer.mode !== preferredLiveMode;
+  if (modeChanged || renderedPlayer.stream !== streamName) {
+    setRenderedPlayer({ stream: streamName, mode: preferredLiveMode });
+    if (modeChanged || preferredLiveMode !== "jsmpeg") {
       setLiveReady(false);
 
       // the old video is still in the DOM until this render commits, so its