diff --git a/web/packages/gallery/components/viewer/FileViewer.tsx b/web/packages/gallery/components/viewer/FileViewer.tsx
index b32f4c8fa8..643eb620bf 100644
--- a/web/packages/gallery/components/viewer/FileViewer.tsx
+++ b/web/packages/gallery/components/viewer/FileViewer.tsx
@@ -8,6 +8,7 @@ import { LoadingButton } from "@/base/components/mui/LoadingButton";
 import { useIsSmallWidth } from "@/base/components/utils/hooks";
 import { type ModalVisibilityProps } from "@/base/components/utils/modal";
 import { useBaseContext } from "@/base/context";
+import { isDevBuild } from "@/base/env";
 import { lowercaseExtension } from "@/base/file-name";
 import { formattedListJoin, ut } from "@/base/i18n";
 import type { LocalUser } from "@/base/local-user";
@@ -53,6 +54,7 @@ import React, {
     useRef,
     useState,
 } from "react";
+import { hlsPlaylistForFile } from "../../services/video";
 import {
     fileInfoExifForFile,
     updateItemDataAlt,
@@ -518,6 +520,15 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                 }
             })();
 
+            if (
+                isDevBuild &&
+                process.env.NEXT_PUBLIC_ENTE_WIP_VIDEO_STREAMING
+            ) {
+                if (file.metadata.fileType == FileType.video) {
+                    void hlsPlaylistForFile(file);
+                }
+            }
+
             const annotation: FileViewerFileAnnotation = {
                 fileID,
                 isOwnFile,
diff --git a/web/packages/gallery/services/file-data.ts b/web/packages/gallery/services/file-data.ts
index 0940e7dd5d..724db99a73 100644
--- a/web/packages/gallery/services/file-data.ts
+++ b/web/packages/gallery/services/file-data.ts
@@ -20,7 +20,7 @@ import { z } from "zod";
  */
 type FileDataType =
     | "mldata" /* See: [Note: "mldata" format] */
-    | "vid_preview" /* See: [Note: Video playlist vs preview] */;
+    | "vid_preview" /* See: [Note: Video playlist and preview] */;
 
 const RemoteFileData = z.object({
     /**
@@ -81,16 +81,19 @@ export const fetchFilesData = async (
  * A variant of {@link fetchFilesData} that fetches data for a single file.
  *
  * Unlike {@link fetchFilesData}, this uses a HTTP GET request.
+ *
+ * Returns `undefined` if no video preview has been generated for this file yet.
  */
 export const fetchFileData = async (
     type: FileDataType,
     fileID: number,
-): Promise<RemoteFileData> => {
+): Promise<RemoteFileData | undefined> => {
     const params = new URLSearchParams({ type, fileID: fileID.toString() });
     const url = await apiURL("/files/data/fetch");
     const res = await fetch(`${url}?${params.toString()}`, {
         headers: await authenticatedRequestHeaders(),
     });
+    if (res.status == 404) return undefined;
     ensureOk(res);
     return z.object({ data: RemoteFileData }).parse(await res.json()).data;
 };
diff --git a/web/packages/gallery/services/video.ts b/web/packages/gallery/services/video.ts
index 085c4ee635..8a15fb7b1f 100644
--- a/web/packages/gallery/services/video.ts
+++ b/web/packages/gallery/services/video.ts
@@ -1,4 +1,5 @@
 import { assertionFailed } from "@/base/assert";
+import log from "@/base/log";
 import type { EnteFile } from "@/media/file";
 import { FileType } from "@/media/file-type";
 import { fetchFileData } from "./file-data";
@@ -9,7 +10,7 @@ import { fetchFileData } from "./file-data";
  *
  * @param file An {@link EnteFile} of type video.
  *
- * [Note: Video playlist vs preview]
+ * [Note: Video playlist and preview]
  *
  * In museum's ontology, there is a distinction between two concepts:
  *
@@ -37,6 +38,6 @@ export const hlsPlaylistForFile = async (file: EnteFile) => {
     }
 
     const encryptedHLS = await fetchFileData("vid_preview", file.id);
-    console.log(encryptedHLS);
+    log.debug(() => ["hlsPlaylistForFile", encryptedHLS]);
     return file.id;
 };