web/src/components/player/HlsVideoPlayer.tsx

@@ -216,11 +216,7 @@ export default function HlsVideoPlayer({
 
   const [tallCamera, setTallCamera] = useState(false);
   const [isPlaying, setIsPlaying] = useState(true);
-  const [persistedMuted, setPersistedMuted] = useUserPersistence(
+  const [muted, setMuted] = useUserPersistence("hlsPlayerMuted", true);
-    "hlsPlayerMuted",
-    true,
-  );
-  const [temporaryMuted, setTemporaryMuted] = useState(false);
   const [volume, setVolume] = useOverlayState("playerVolume", 1.0);
   const [defaultPlaybackRate] = useUserPersistence("playbackRate", 1);
   const [playbackRate, setPlaybackRate] = useOverlayState(
@@ -236,16 +232,6 @@ export default function HlsVideoPlayer({
     height: number;
   }>({ width: 0, height: 0 });
 
-  const muted = persistedMuted || temporaryMuted;
-
-  const onSetMuted = useCallback(
-    (muted: boolean) => {
-      setTemporaryMuted(false);
-      setPersistedMuted(muted);
-    },
-    [setPersistedMuted],
-  );
-
   useEffect(() => {
     if (!isDesktop) {
       return;
@@ -311,7 +297,7 @@ export default function HlsVideoPlayer({
             fullscreen: supportsFullscreen,
           }}
           setControlsOpen={setControlsOpen}
-          setMuted={onSetMuted}
+          setMuted={(muted) => setMuted(muted)}
           playbackRate={playbackRate ?? 1}
           hotKeys={hotKeys}
           onPlayPause={onPlayPause}
@@ -418,20 +404,9 @@ export default function HlsVideoPlayer({
                 : undefined
             }
             onVolumeChange={() => {
-              if (!videoRef.current) {
+              setVolume(videoRef.current?.volume ?? 1.0, true);
-                return;
+              if (!frigateControls) {
-              }
+                setMuted(videoRef.current?.muted);
-
-              setVolume(videoRef.current.volume ?? 1.0, true);
-
-              if (frigateControls) {
-                if (videoRef.current.muted && !persistedMuted) {
-                  setTemporaryMuted(true);
-                } else if (!videoRef.current.muted && temporaryMuted) {
-                  setTemporaryMuted(false);
-                }
-              } else {
-                setPersistedMuted(videoRef.current.muted);
               }
             }}
             onPlay={() => {

web/src/components/player/dynamic/DynamicVideoController.ts

@@ -6,7 +6,6 @@ import {
   calculateInpointOffset,
   calculateSeekPosition,
 } from "@/utils/videoUtil";
-import { playWithTemporaryMuteFallback } from "@/utils/videoUtil.ts";
 
 type PlayerMode = "playback" | "scrubbing";
 
@@ -108,7 +107,7 @@ export class DynamicVideoController {
     return new Promise((resolve) => {
       const onSeekedHandler = () => {
         this.playerController.removeEventListener("seeked", onSeekedHandler);
-        playWithTemporaryMuteFallback(this.playerController);
+        this.playerController.play();
         resolve(undefined);
       };
 

web/src/utils/videoUtil.ts

@@ -78,20 +78,3 @@ export function calculateSeekPosition(
 
   return seekSeconds >= 0 ? seekSeconds : undefined;
 }
-
-/**
- * Attempts to play the video, and if it fails due to a NotAllowedError (often caused by browser autoplay restrictions),
- * it temporarily mutes the video and tries to play again.
- * @param video - The HTMLVideoElement to play
- */
-export function playWithTemporaryMuteFallback(video: HTMLVideoElement) {
-  return video.play().catch((error: { name?: string }) => {
-    if (error.name === "NotAllowedError" && !video.muted) {
-      video.muted = true;
-
-      return video.play().catch(() => undefined);
-    }
-
-    throw error;
-  });
-}