diff --git a/frontend/src/components/events/timeline/TimelinePlayer.tsx b/frontend/src/components/events/timeline/TimelinePlayer.tsx
index 3cc3bb3fc..6e67b43dc 100644
--- a/frontend/src/components/events/timeline/TimelinePlayer.tsx
+++ b/frontend/src/components/events/timeline/TimelinePlayer.tsx
@@ -1,10 +1,11 @@
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
-import Hls from "hls.js";
+import Hls, { LevelLoadedData } from "hls.js";
 import React, { useEffect, useRef } from "react";
 import { v4 as uuidv4 } from "uuid";
 
 import {
+  SCALE,
   calculateHeight,
   findFragmentByTimestamp,
 } from "components/events/timeline/utils";
@@ -14,16 +15,95 @@ import * as types from "lib/types";
 
 dayjs.extend(utc);
 
+const loadSource = (
+  hlsRef: React.MutableRefObject<Hls | null>,
+  requestedTimestamp: number,
+  camera: types.Camera | types.FailedCamera,
+) => {
+  if (!hlsRef.current) {
+    return;
+  }
+  const source = `/api/v1/hls/${camera.identifier}/index.m3u8?start_timestamp=${requestedTimestamp}&daily=true`;
+  hlsRef.current.loadSource(source);
+};
+
+const onLevelLoaded = (
+  data: LevelLoadedData,
+  hlsRef: React.MutableRefObject<Hls | null>,
+  videoRef: React.RefObject<HTMLVideoElement>,
+  initialProgramDateTime: React.MutableRefObject<number | null>,
+  requestedTimestampRef: React.MutableRefObject<number>,
+) => {
+  const requestedTimestampMillis = requestedTimestampRef.current * 1000;
+  const fragments = data.details.fragments;
+  if (!hlsRef.current || !videoRef.current) {
+    return;
+  }
+
+  if (fragments.length > 0) {
+    initialProgramDateTime.current = fragments[0].programDateTime!;
+  }
+
+  // Seek to the requested timestamp
+  const fragment = findFragmentByTimestamp(fragments, requestedTimestampMillis);
+  if (fragment) {
+    let seekTarget = fragment.start;
+    if (requestedTimestampMillis > fragment.programDateTime!) {
+      seekTarget =
+        fragment.start +
+        (requestedTimestampMillis - fragment.programDateTime!) / 1000;
+    } else {
+      seekTarget = fragment.start;
+    }
+    videoRef.current.currentTime = seekTarget;
+  }
+  videoRef.current.play();
+};
+
+const onManifestParsed = (
+  hlsRef: React.MutableRefObject<Hls | null>,
+  videoRef: React.RefObject<HTMLVideoElement>,
+) => {
+  if (!hlsRef.current || !videoRef.current) {
+    return;
+  }
+
+  videoRef.current.muted = true;
+  hlsRef.current.startLoad();
+};
+
+const onMediaAttached = (
+  hlsRef: React.MutableRefObject<Hls | null>,
+  videoRef: React.RefObject<HTMLVideoElement>,
+  initialProgramDateTime: React.MutableRefObject<number | null>,
+  requestedTimestampRef: React.MutableRefObject<number>,
+) => {
+  hlsRef.current!.once(Hls.Events.MANIFEST_PARSED, () => {
+    onManifestParsed(hlsRef, videoRef);
+  });
+
+  hlsRef.current!.once(
+    Hls.Events.LEVEL_LOADED,
+    (event: any, data: LevelLoadedData) => {
+      onLevelLoaded(
+        data,
+        hlsRef,
+        videoRef,
+        initialProgramDateTime,
+        requestedTimestampRef,
+      );
+    },
+  );
+};
+
 const initializePlayer = (
   hlsRef: React.MutableRefObject<Hls | null>,
   videoRef: React.RefObject<HTMLVideoElement>,
-  intervalRef: React.MutableRefObject<NodeJS.Timeout | null>,
   initialProgramDateTime: React.MutableRefObject<number | null>,
   auth: types.AuthEnabledResponse,
   camera: types.Camera | types.FailedCamera,
-  requestedTimestamp: number,
+  requestedTimestampRef: React.MutableRefObject<number>,
 ) => {
-  const requestedTimestampMillis = requestedTimestamp * 1000;
   // Destroy the previous hls instance if it exists
   if (hlsRef.current) {
     hlsRef.current.destroy();
@@ -55,53 +135,16 @@ const initializePlayer = (
   }
 
   // Load the source and start the hls instance
-  hlsRef.current.on(Hls.Events.MEDIA_ATTACHED, () => {
-    const source = `/api/v1/hls/${
-      camera.identifier
-    }/index.m3u8?start_timestamp=${requestedTimestamp - 3600}`;
-    hlsRef.current!.loadSource(source);
-    hlsRef.current!.on(Hls.Events.MANIFEST_PARSED, () => {
-      if (!hlsRef.current || !videoRef.current) {
-        return;
-      }
-
-      videoRef.current.muted = true;
-      hlsRef.current.startLoad();
+  loadSource(hlsRef, requestedTimestampRef.current, camera);
 
-      // Wait for the manifest to be parsed and then seek to the requested timestamp
-      intervalRef.current = setInterval(() => {
-        if (
-          hlsRef.current &&
-          hlsRef.current.levels[hlsRef.current.currentLevel]
-        ) {
-          const fragments =
-            hlsRef.current.levels[hlsRef.current.currentLevel].details
-              ?.fragments || [];
-
-          if (fragments.length > 0) {
-            initialProgramDateTime.current = fragments[0].programDateTime!;
-          }
-
-          const fragment = findFragmentByTimestamp(
-            hlsRef.current.levels[hlsRef.current.currentLevel].details
-              ?.fragments || [],
-            requestedTimestampMillis,
-          );
-
-          if (fragment && videoRef.current) {
-            let seekTarget = fragment.start;
-            if (requestedTimestampMillis > fragment.programDateTime!) {
-              seekTarget =
-                fragment.start +
-                (requestedTimestampMillis - fragment.programDateTime!) / 1000;
-            }
-            videoRef.current.currentTime = seekTarget;
-            videoRef.current.play();
-          }
-          clearInterval(intervalRef.current as NodeJS.Timeout);
-        }
-      }, 50);
-    });
+  // Handle MEDIA_ATTACHED event
+  hlsRef.current.on(Hls.Events.MEDIA_ATTACHED, () => {
+    onMediaAttached(
+      hlsRef,
+      videoRef,
+      initialProgramDateTime,
+      requestedTimestampRef,
+    );
   });
 
   // Handle errors
@@ -118,11 +161,10 @@ const initializePlayer = (
           initializePlayer(
             hlsRef,
             videoRef,
-            intervalRef,
             initialProgramDateTime,
             auth,
             camera,
-            requestedTimestamp,
+            requestedTimestampRef,
           );
           break;
       }
@@ -134,10 +176,9 @@ const useInitializePlayer = (
   hlsRef: React.MutableRefObject<Hls | null>,
   videoRef: React.RefObject<HTMLVideoElement>,
   initialProgramDateTime: React.MutableRefObject<number | null>,
-  requestedTimestamp: number,
+  requestedTimestampRef: React.MutableRefObject<number>,
   camera: types.Camera | types.FailedCamera,
 ) => {
-  const intervalRef = useRef<NodeJS.Timeout | null>(null);
   const { auth } = useAuthContext();
 
   useEffect(() => {
@@ -145,64 +186,101 @@ const useInitializePlayer = (
       initializePlayer(
         hlsRef,
         videoRef,
-        intervalRef,
         initialProgramDateTime,
         auth,
         camera,
-        requestedTimestamp,
+        requestedTimestampRef,
       );
     }
     const hls = hlsRef.current;
-    const interval = intervalRef.current;
     return () => {
       if (hls) {
         hls.destroy();
         hlsRef.current = null;
       }
-      if (interval) {
-        clearInterval(interval);
-      }
     };
     // Must disable this warning since we dont want to ever run this twice
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 };
 
+// Seek to the requestedTimestamp if it is within the seekable range
 const useSeekToTimestamp = (
   hlsRef: React.MutableRefObject<Hls | null>,
   videoRef: React.RefObject<HTMLVideoElement>,
   initialProgramDateTime: React.MutableRefObject<number | null>,
   requestedTimestamp: number,
+  camera: types.Camera | types.FailedCamera,
 ) => {
   useEffect(() => {
-    // Seek to the requestedTimestamp if it is within the seekable range
-    if (hlsRef.current && videoRef.current && initialProgramDateTime.current) {
-      const seekTarget =
-        requestedTimestamp - initialProgramDateTime.current / 1000;
-      if (hlsRef.current.media) {
-        const seekable = hlsRef.current.media.seekable;
-        for (let i = 0; i < seekable.length; i++) {
-          if (
-            seekTarget >= seekable.start(i) &&
-            seekTarget <= seekable.end(i)
-          ) {
-            videoRef.current.currentTime = seekTarget;
-            videoRef.current.play();
-            break;
-          } else if (seekTarget < seekable.start(i)) {
-            videoRef.current.currentTime = seekable.start(i);
-            videoRef.current.play();
-            break;
-          } else if (seekTarget > seekable.end(i)) {
-            videoRef.current.currentTime = seekable.end(i);
-            videoRef.current.play();
-          }
-        }
+    if (!hlsRef.current || !videoRef.current || !hlsRef.current.media) {
+      return;
+    }
+
+    // Set seek target timestamp
+    let seekTarget = requestedTimestamp;
+    if (initialProgramDateTime.current) {
+      seekTarget = requestedTimestamp - initialProgramDateTime.current / 1000;
+    }
+
+    // Seek to the requested timestamp
+    const seekable = hlsRef.current.media.seekable;
+    let seeked = false;
+    for (let i = 0; i < seekable.length; i++) {
+      if (seekTarget >= seekable.start(i) && seekTarget <= seekable.end(i)) {
+        videoRef.current.currentTime = seekTarget;
+        seeked = true;
+        break;
+      } else if (
+        // Seek to start if target is less than start and within SCALE seconds of start
+        seekTarget < seekable.start(i) &&
+        seekable.start(i) - seekTarget < SCALE
+      ) {
+        videoRef.current.currentTime = seekable.start(i);
+        seeked = true;
+        break;
+      } else if (
+        // Seek to end if target is greater than end and within SCALE seconds of end
+        seekTarget > seekable.end(i) &&
+        seekTarget - seekable.end(i) < SCALE
+      ) {
+        videoRef.current.currentTime = seekable.end(i);
+        seeked = true;
+        break;
       }
     }
-  }, [hlsRef, initialProgramDateTime, requestedTimestamp, videoRef]);
+
+    if (!seeked) {
+      loadSource(hlsRef, requestedTimestamp, camera);
+    }
+    videoRef.current.play();
+  }, [camera, hlsRef, initialProgramDateTime, requestedTimestamp, videoRef]);
 };
 
+const useResizeObserver = (
+  containerRef: React.RefObject<HTMLDivElement>,
+  videoRef: React.RefObject<HTMLVideoElement>,
+  camera: types.Camera | types.FailedCamera,
+) => {
+  const resizeObserver = useRef<ResizeObserver>();
+
+  useEffect(() => {
+    if (containerRef.current) {
+      resizeObserver.current = new ResizeObserver(() => {
+        videoRef.current!.style.height = `${calculateHeight(
+          camera,
+          containerRef.current!.offsetWidth,
+        )}px`;
+      });
+      resizeObserver.current.observe(containerRef.current);
+    }
+    return () => {
+      if (resizeObserver.current) {
+        resizeObserver.current.disconnect();
+      }
+    };
+  }, [camera, containerRef, videoRef]);
+};
 interface TimelinePlayerProps {
   containerRef: React.RefObject<HTMLDivElement>;
   hlsRef: React.MutableRefObject<Hls | null>;
@@ -218,12 +296,13 @@ export const TimelinePlayer: React.FC<TimelinePlayerProps> = ({
 }) => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const initialProgramDateTime = useRef<number | null>(null);
-  const resizeObserver = useRef<ResizeObserver>();
+  const requestedTimestampRef = useRef<number>(requestedTimestamp);
+  requestedTimestampRef.current = requestedTimestamp;
   useInitializePlayer(
     hlsRef,
     videoRef,
     initialProgramDateTime,
-    requestedTimestamp,
+    requestedTimestampRef,
     camera,
   );
   useSeekToTimestamp(
@@ -231,24 +310,9 @@ export const TimelinePlayer: React.FC<TimelinePlayerProps> = ({
     videoRef,
     initialProgramDateTime,
     requestedTimestamp,
+    camera,
   );
-
-  useEffect(() => {
-    if (containerRef.current) {
-      resizeObserver.current = new ResizeObserver(() => {
-        videoRef.current!.style.height = `${calculateHeight(
-          camera,
-          containerRef.current!.offsetWidth,
-        )}px`;
-      });
-      resizeObserver.current.observe(containerRef.current);
-    }
-    return () => {
-      if (resizeObserver.current) {
-        resizeObserver.current.disconnect();
-      }
-    };
-  }, [camera, containerRef]);
+  useResizeObserver(containerRef, videoRef, camera);
 
   return (
     <video
diff --git a/tests/components/webserver/api/v1/test_hls.py b/tests/components/webserver/api/v1/test_hls.py
index b50ebbd0f..0c53a5470 100644
--- a/tests/components/webserver/api/v1/test_hls.py
+++ b/tests/components/webserver/api/v1/test_hls.py
@@ -48,7 +48,7 @@ def test_get_recording_hls_playlist(self):
         assert response_string.count("#EXT-X-DISCONTINUITY") == 3
         assert response_string.count("#EXT-X-ENDLIST") == 1
 
-    def test_get_recording_hls_playlist_gap(self):
+    def test_get_recording_hls_playlist_gap_segments(self):
         """Test getting a recording HLS playlist with gap in segments."""
         with self._get_db_session() as session:
             session.execute(delete(Files).where(Files.id.in_([15, 17, 19, 21])))
@@ -76,13 +76,53 @@ def test_get_recording_hls_playlist_gap(self):
             "viseron.components.storage.queries.utcnow",
             return_value=self._now + datetime.timedelta(seconds=3600),
         ):
-            response = self.fetch("/api/v1/hls/test/index.m3u8?start_timestamp=0")
+            response = self.fetch(
+                "/api/v1/hls/test/index.m3u8?start_timestamp="
+                f"{int(self._now.timestamp())}"
+            )
         assert response.code == 200
         response_string = response.body.decode()
         assert response_string.count("#EXTINF") == 7
         assert response_string.count("#EXT-X-DISCONTINUITY") == 7
         assert response_string.count("#EXT-X-ENDLIST") == 1
 
+    def test_get_recording_hls_playlist_gap_start(self):
+        """Test getting a recording HLS playlist with gap before start."""
+        with self._get_db_session() as session:
+            session.execute(delete(Files).where(Files.id.in_([15, 17, 19, 21])))
+            session.commit()
+
+        mocked_camera = MockCamera(
+            identifier="test", config={CONFIG_RECORDER: {CONFIG_LOOKBACK: 5}}
+        )
+        with patch(
+            (
+                "viseron.components.webserver.request_handler.ViseronRequestHandler."
+                "_get_camera"
+            ),
+            return_value=mocked_camera,
+        ), patch(
+            (
+                "viseron.components.webserver.request_handler.ViseronRequestHandler"
+                "._get_session"
+            ),
+            return_value=self._get_db_session(),
+        ), patch(
+            "viseron.components.webserver.api.v1.hls._get_init_file",
+            return_value="/test/init.mp4",
+        ), patch(
+            "viseron.components.storage.queries.utcnow",
+            return_value=self._now + datetime.timedelta(seconds=3600),
+        ):
+            response = self.fetch(
+                "/api/v1/hls/test/index.m3u8?start_timestamp="
+                f"{int(self._now.timestamp() - 300)}"
+            )
+        assert response.code == 200
+        response_string = response.body.decode()
+        assert response_string.count("#EXTINF") == 0
+        assert response_string.count("#EXT-X-ENDLIST") == 1
+
     def test_get_recording_hls_ongoing(self):
         """Test getting a recording HLS playlist for a recording that has not ended."""
         recording_id = 3
diff --git a/viseron/components/webserver/api/v1/hls.py b/viseron/components/webserver/api/v1/hls.py
index 9e914ea0d..0467bb847 100644
--- a/viseron/components/webserver/api/v1/hls.py
+++ b/viseron/components/webserver/api/v1/hls.py
@@ -6,7 +6,7 @@
 import os
 from dataclasses import dataclass
 from http import HTTPStatus
-from typing import TYPE_CHECKING, Any, Callable
+from typing import TYPE_CHECKING, Any, Callable, List, Optional, Union
 
 import voluptuous as vol
 from sqlalchemy import Row, select
@@ -18,6 +18,7 @@
 from viseron.domains.camera.fragmenter import Fragment, generate_playlist
 from viseron.helpers import utcnow
 from viseron.helpers.fixed_size_dict import FixedSizeDict
+from viseron.helpers.validators import request_argument_no_value
 
 if TYPE_CHECKING:
     from sqlalchemy.orm import Session
@@ -78,6 +79,7 @@ class HlsAPIHandler(BaseAPIHandler):
                     vol.Optional("end_timestamp", default=None): vol.Maybe(
                         vol.Coerce(int)
                     ),
+                    vol.Optional("daily", default=False): request_argument_no_value,
                 }
             ),
         },
@@ -145,6 +147,7 @@ async def get_hls_playlist_time_period(
             hls_client_id,
             self.request_arguments["start_timestamp"],
             self.request_arguments["end_timestamp"],
+            self.request_arguments["daily"],
         )
         if not playlist:
             self.response_error(
@@ -312,53 +315,83 @@ def _generate_playlist(
     return playlist
 
 
+def has_gap_before_start(files: List[Row[Any]], start_timestamp: int) -> bool:
+    """Check if there is a gap before the start of the playlist."""
+    if files and files[0].orig_ctime - datetime.datetime.fromtimestamp(
+        start_timestamp, datetime.timezone.utc
+    ) > datetime.timedelta(seconds=300):
+        return True
+    return False
+
+
+def has_gap_in_segments(prev_file: Optional[Row[Any]], file: Row[Any]) -> bool:
+    """Check if there is a gap in segments."""
+    if prev_file and file.orig_ctime - prev_file.orig_ctime > datetime.timedelta(
+        seconds=CAMERA_SEGMENT_DURATION * 3
+    ):
+        return True
+    return False
+
+
+def update_hls_client(
+    hls_client_id: str,
+    fragments: List[Fragment],
+) -> int:
+    """Keep track of HLS client media sequence."""
+    media_sequence = 0
+    hls_client = HlsAPIHandler.hls_client_ids.get(hls_client_id, None)
+    if hls_client:
+        media_sequence = hls_client.media_sequence
+        media_sequence += count_files_removed(hls_client.fragments, fragments)
+        hls_client.fragments = fragments
+        hls_client.media_sequence = media_sequence
+    else:
+        HlsAPIHandler.hls_client_ids[hls_client_id] = HlsClient(
+            hls_client_id, fragments, media_sequence
+        )
+    return media_sequence
+
+
 def _generate_playlist_time_period(
     get_session: Callable[[], Session],
-    camera: AbstractCamera | FailedCamera,
-    hls_client_id: str | None,
+    camera: Union[AbstractCamera, FailedCamera],
+    hls_client_id: Optional[str],
     start_timestamp: int,
-    end_timestamp: int | None = None,
-) -> str | None:
+    end_timestamp: Optional[int] = None,
+    end_playlist_at_timestamp: bool = False,
+) -> Optional[str]:
     """Generate the HLS playlist for a time period."""
     files = get_time_period_fragments(
         camera.identifier, start_timestamp, end_timestamp, get_session
     )
     fragments = []
-    prev_file: Row[Any] | None = None
-    end_playlist = bool(end_timestamp)
-    for file in files:
-        # Break if there is a gap in segments
-        if prev_file and file.orig_ctime - prev_file.orig_ctime > datetime.timedelta(
-            seconds=CAMERA_SEGMENT_DURATION * 3
-        ):
-            end_playlist = True
-            break
-
-        if file.meta.get("m3u8", {}).get("EXTINF", False):
-            fragments.append(
-                Fragment(
-                    file.filename,
-                    f"/files{file.path}",
-                    float(
-                        file.meta["m3u8"]["EXTINF"],
-                    ),
-                    file.orig_ctime,
+    prev_file: Optional[Row[Any]] = None
+    end_playlist = bool(end_timestamp) if not end_playlist_at_timestamp else False
+
+    if has_gap_before_start(files, start_timestamp):
+        end_playlist = True
+    else:
+        for file in files:
+            if has_gap_in_segments(prev_file, file):
+                end_playlist = True
+                break
+
+            if file.meta.get("m3u8", {}).get("EXTINF", False):
+                fragments.append(
+                    Fragment(
+                        file.filename,
+                        f"/files{file.path}",
+                        float(file.meta["m3u8"]["EXTINF"]),
+                        file.orig_ctime,
+                    )
                 )
-            )
-            prev_file = file
+                prev_file = file
 
-    media_sequence = 0
-    if end_timestamp is None and hls_client_id:
-        hls_client = HlsAPIHandler.hls_client_ids.get(hls_client_id, None)
-        if hls_client:
-            media_sequence = hls_client.media_sequence
-            media_sequence += count_files_removed(hls_client.fragments, fragments)
-            hls_client.fragments = fragments
-            hls_client.media_sequence = media_sequence
-        else:
-            HlsAPIHandler.hls_client_ids[hls_client_id] = HlsClient(
-                hls_client_id, fragments, media_sequence
-            )
+    media_sequence = (
+        update_hls_client(hls_client_id, fragments)
+        if end_timestamp is None and hls_client_id
+        else 0
+    )
 
     init_file = _get_init_file(get_session, camera)
     if not init_file: