diff --git a/.gitignore b/.gitignore
index b60f8604..37122328 100644
--- a/.gitignore
+++ b/.gitignore
@@ -52,6 +52,8 @@ test-results
 e2e/report
 # Provisioned at build/test time from node_modules/pdfjs-dist
 public/pdf.worker.mjs
+# Provisioned at build/test time from node_modules/@hevcjs/core
+public/hevc/
 # Generated by `yarn generate-test-pdfs`
 public/storybook/preview-files/pdf_with_links.pdf
 public/storybook/preview-files/pdf_with_js.pdf
diff --git a/e2e/file-preview/hevc-video-preview.spec.tsx b/e2e/file-preview/hevc-video-preview.spec.tsx
new file mode 100644
index 00000000..1091329f
--- /dev/null
+++ b/e2e/file-preview/hevc-video-preview.spec.tsx
@@ -0,0 +1,53 @@
+import { test, expect } from "@playwright/experimental-ct-react";
+import { TestFilePreview } from "../helpers/mount-preview";
+import { hevcVideoFile } from "../helpers/fixtures";
+
+test.describe("HEVC Video Preview", () => {
+  test("Renders the video player inside the video wrapper", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<TestFilePreview files={[hevcVideoFile]} />);
+    await expect(page.getByTestId("file-preview")).toBeVisible({
+      timeout: 10000,
+    });
+
+    const wrapper = page.locator(".video-preview-viewer-container");
+    await expect(wrapper).toBeVisible();
+    await expect(wrapper.locator(".video-player")).toBeVisible();
+  });
+
+  test("Plays the HEVC video (transcoding if needed) or falls back to download", async ({
+    mount,
+    page,
+  }) => {
+    await mount(<TestFilePreview files={[hevcVideoFile]} />);
+    await expect(page.getByTestId("file-preview")).toBeVisible({
+      timeout: 10000,
+    });
+
+    // Native-first, then a lazy-loaded WASM transcode — behaviour depends on
+    // the browser (native HEVC on Safari, transcode on Chrome, download
+    // fallback where WebCodecs H.264 isn't available). We assert it always
+    // resolves to a usable state and never gets stuck on the spinner: either a
+    // video with decoded frames, or the download fallback.
+    await expect
+      .poll(
+        async () => {
+          const fellBack = await page
+            .getByText("not supported for preview")
+            .isVisible()
+            .catch(() => false);
+          if (fellBack) return "fallback";
+
+          const decoded = await page
+            .locator("video.video-player__video")
+            .evaluate((el) => (el as HTMLVideoElement).videoWidth > 0)
+            .catch(() => false);
+          return decoded ? "playing" : "pending";
+        },
+        { timeout: 45000, intervals: [500] }
+      )
+      .not.toBe("pending");
+  });
+});
diff --git a/e2e/helpers/fixtures.ts b/e2e/helpers/fixtures.ts
index ec69e29e..898600af 100644
--- a/e2e/helpers/fixtures.ts
+++ b/e2e/helpers/fixtures.ts
@@ -6,7 +6,7 @@ const file = (
   id: string,
   title: string,
   mimetype: string,
-  extras: Partial<FilePreviewType> = {},
+  extras: Partial<FilePreviewType> = {}
 ): FilePreviewType => ({
   id,
   title,
@@ -21,10 +21,14 @@ export const imageFile = file("img-monet", "monet_1.jpeg", "image/jpeg");
 
 export const videoFile = file("vid-chantier", "chantier.mp4", "video/mp4");
 
+// HEVC/H.265 in a plain mp4 container (codec not in the mimetype, like a real
+// upload). Played natively where supported, transcoded to H.264 otherwise.
+export const hevcVideoFile = file("vid-hevc", "chantier-hevc.mp4", "video/mp4");
+
 export const audioFile = file(
   "aud-noise",
   "nuissance_sonores.mp3",
-  "audio/mpeg",
+  "audio/mpeg"
 );
 
 export const pdfFile = file("pdf-pvcm", "pv_cm.pdf", "application/pdf");
@@ -32,37 +36,33 @@ export const pdfFile = file("pdf-pvcm", "pv_cm.pdf", "application/pdf");
 export const pdfCmFile = file(
   "pdf-cm",
   "CR Conseil municipal vfvdef_maireok.pdf",
-  "application/pdf",
+  "application/pdf"
 );
 
 export const pdfMixedFile = file(
   "pdf-mixed",
   "mixed_page_sizes.pdf",
-  "application/pdf",
+  "application/pdf"
 );
 
 export const pdfLinksFile = file(
   "pdf-links",
   "pdf_with_links.pdf",
-  "application/pdf",
+  "application/pdf"
 );
 
-export const pdfJsFile = file(
-  "pdf-js",
-  "pdf_with_js.pdf",
-  "application/pdf",
-);
+export const pdfJsFile = file("pdf-js", "pdf_with_js.pdf", "application/pdf");
 
 export const pdfJsLinkFile = file(
   "pdf-jslink",
   "pdf_with_js_link.pdf",
-  "application/pdf",
+  "application/pdf"
 );
 
 export const pdfCorruptedFile = file(
   "pdf-corrupted",
   "pdf_corrupted.pdf",
-  "application/pdf",
+  "application/pdf"
 );
 
 export const heicFile = file("heic-img", "IMG_7665.heic", "image/heic");
@@ -70,5 +70,5 @@ export const heicFile = file("heic-img", "IMG_7665.heic", "image/heic");
 export const unsupportedFile = file(
   "bin-unsupported",
   "test-unsupported.bin",
-  "application/octet-stream",
+  "application/octet-stream"
 );
diff --git a/package.json b/package.json
index 616b80d7..86745e85 100644
--- a/package.json
+++ b/package.json
@@ -36,12 +36,16 @@
     "test": "vitest run",
     "build-theme": "cunningham -g css,scss,ts -o src && mv src/cunningham-tokens.scss src/cunningham-tokens-sass.scss",
     "copy-pdf-worker": "shx cp node_modules/pdfjs-dist/build/pdf.worker.mjs public/pdf.worker.mjs",
-    "prestorybook": "yarn copy-pdf-worker",
+    "copy-hevc-worker": "shx mkdir -p public/hevc && shx cp node_modules/@hevcjs/core/dist/transcode-worker.js node_modules/@hevcjs/core/dist/wasm/hevc-decode.js node_modules/@hevcjs/core/dist/wasm/hevc-decode.wasm public/hevc/",
+    "copy-preview-workers": "yarn copy-pdf-worker && yarn copy-hevc-worker",
+    "prestorybook": "yarn copy-preview-workers",
     "storybook": "storybook dev -p 6006",
+    "prebuild-storybook": "yarn copy-preview-workers",
     "build-storybook": "storybook build",
     "generate-icons": "tsx scripts/generate-icons.ts",
-    "prescalingo-postbuild": "yarn copy-pdf-worker",
+    "prescalingo-postbuild": "yarn copy-preview-workers",
     "scalingo-postbuild": "yarn build && yarn build-storybook",
+    "pretest:ct": "yarn copy-preview-workers",
     "test:ct": "playwright test -c playwright.config.ts",
     "test:ct:ui": "playwright test -c playwright.config.ts --ui",
     "generate-test-pdfs": "node scripts/generate-test-pdfs.mjs"
@@ -54,20 +58,22 @@
     "@gouvfr-lasuite/cunningham-react": "4.3.0",
     "@gouvfr-lasuite/cunningham-tokens": "3.1.0",
     "@gouvfr-lasuite/integration": "1.0.2",
+    "@hevcjs/core": "^1.3.0",
     "@types/node": "22.10.7",
     "clsx": "2.1.1",
     "cmdk": "1.0.4",
+    "mp4box": "^2.3.0",
     "react-arborist": "3.4.3",
     "react-aria-components": "1.16.0",
+    "react-pdf": "10.1.0",
     "react-resizable-panels": "2.1.7",
     "react-stately": "3.37.0",
-    "react-virtualized": "9.22.6",
-    "react-pdf": "10.1.0"
+    "react-virtualized": "9.22.6"
   },
   "peerDependencies": {
+    "@tanstack/react-query": "^5",
     "react": "^19.1.2",
-    "react-dom": "^19.1.2",
-    "@tanstack/react-query": "^5"
+    "react-dom": "^19.1.2"
   },
   "devDependencies": {
     "@babel/core": "7.26.0",
@@ -76,6 +82,8 @@
     "@babel/preset-typescript": "7.26.0",
     "@chromatic-com/storybook": "3.2.4",
     "@eslint/js": "9.17.0",
+    "@playwright/experimental-ct-react": "1.52.0",
+    "@playwright/test": "1.52.0",
     "@storybook/addon-a11y": "8.5.2",
     "@storybook/addon-essentials": "8.5.2",
     "@storybook/addon-interactions": "8.5.2",
@@ -104,6 +112,7 @@
     "glob": "11.0.0",
     "globals": "15.14.0",
     "jsdom": "25.0.1",
+    "pdf-lib": "1.17.1",
     "react": "19.1.2",
     "react-dom": "19.1.2",
     "react-hook-form": "7.54.2",
@@ -122,10 +131,7 @@
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "2.1.8",
     "vitest-fetch-mock": "0.4.3",
-    "yup": "1.6.1",
-    "@playwright/experimental-ct-react": "1.52.0",
-    "@playwright/test": "1.52.0",
-    "pdf-lib": "1.17.1"
+    "yup": "1.6.1"
   },
   "eslintConfig": {
     "extends": [
diff --git a/public/storybook/preview-files/chantier-hevc.mp4 b/public/storybook/preview-files/chantier-hevc.mp4
new file mode 100644
index 00000000..445a2e99
Binary files /dev/null and b/public/storybook/preview-files/chantier-hevc.mp4 differ
diff --git a/public/storybook/preview-files/iphone-hevc.mov b/public/storybook/preview-files/iphone-hevc.mov
new file mode 100644
index 00000000..8e32e5b1
Binary files /dev/null and b/public/storybook/preview-files/iphone-hevc.mov differ
diff --git a/src/components/preview/FilePreview.tsx b/src/components/preview/FilePreview.tsx
index 326e5ed8..68420c1b 100644
--- a/src/components/preview/FilePreview.tsx
+++ b/src/components/preview/FilePreview.tsx
@@ -54,7 +54,7 @@ const PreviewPdf = lazy(() =>
         };
       }
       throw err;
-    }),
+    })
 );
 
 export type { FilePreviewType } from "./types";
@@ -79,6 +79,11 @@ interface FilePreviewProps {
   hideCloseButton?: boolean;
   pdfWorkerSrc?: string;
   onOpenInEditor?: (file: FilePreviewType) => void;
+  /**
+   * Force HEVC videos through the in-browser transcoder even when the browser
+   * could decode them natively. Mainly for testing/demoing the transcode path.
+   */
+  forceVideoTranscode?: boolean;
 }
 
 export const FilePreview = ({
@@ -97,6 +102,7 @@ export const FilePreview = ({
   hideCloseButton,
   pdfWorkerSrc,
   onOpenInEditor,
+  forceVideoTranscode,
 }: FilePreviewProps) => {
   const { t } = useCustomTranslations();
   const [currentIndex, setCurrentIndex] = useState(initialIndexFile);
@@ -199,6 +205,19 @@ export const FilePreview = ({
                 src={currentFile.url_preview}
                 className="file-preview__viewer"
                 controls={true}
+                forceTranscode={forceVideoTranscode}
+                // Remount per file id so playback / transcoding restarts cleanly
+                // when switching between videos.
+                key={currentFile.id}
+                // HEVC/H.265 that the browser can't decode is transcoded to
+                // H.264 in-browser; if that also fails, offer a download.
+                unsupportedFallback={
+                  <NotSupportedPreview
+                    title={t("components.filePreview.unsupported.videoTitle")}
+                    file={currentFile}
+                    onDownload={handleDownload}
+                  />
+                }
               />
             </div>
           </div>
@@ -384,7 +403,7 @@ export const FilePreview = ({
           className={clsx(
             "file-preview__container",
             isSidebarOpen && "file-preview__container--sidebar-open",
-            classNames,
+            classNames
           )}
         >
           <div className="file-preview__header">
diff --git a/src/components/preview/stories/FilePreviewExample.tsx b/src/components/preview/stories/FilePreviewExample.tsx
index 82fbb4f1..0ae0c056 100644
--- a/src/components/preview/stories/FilePreviewExample.tsx
+++ b/src/components/preview/stories/FilePreviewExample.tsx
@@ -12,6 +12,7 @@ interface FilePreviewExampleProps {
   initialFileId?: string;
   customHeaderActions?: (headerActions: ReactNode) => ReactNode;
   headerActionsMenuOptions?: (file: FilePreviewType) => MenuItemAction[];
+  forceVideoTranscode?: boolean;
 }
 
 export const FilePreviewExample = ({
@@ -19,9 +20,10 @@ export const FilePreviewExample = ({
   initialFileId,
   customHeaderActions,
   headerActionsMenuOptions,
+  forceVideoTranscode,
 }: FilePreviewExampleProps) => {
   const [openedFileId, setOpenedFileId] = useState<string | undefined>(
-    initialFileId ?? files[0]?.id,
+    initialFileId ?? files[0]?.id
   );
 
   useEffect(() => {
@@ -52,6 +54,7 @@ export const FilePreviewExample = ({
           }
           customHeaderActions={customHeaderActions}
           headerActionsMenuOptions={headerActionsMenuOptions}
+          forceVideoTranscode={forceVideoTranscode}
         />
       </div>
     </QueryClientProvider>
diff --git a/src/components/preview/stories/file-preview.stories.tsx b/src/components/preview/stories/file-preview.stories.tsx
index 5a303905..a59fa573 100644
--- a/src/components/preview/stories/file-preview.stories.tsx
+++ b/src/components/preview/stories/file-preview.stories.tsx
@@ -12,6 +12,8 @@ import {
   allFiles,
   audioFiles,
   heicFile,
+  hevcVideoFile,
+  iphoneVideoFile,
   imageFiles,
   pdfFiles,
   suspiciousFile,
@@ -33,7 +35,7 @@ import { Button } from "@gouvfr-lasuite/cunningham-react";
  * | Category | Viewer | Highlights |
  * |----------|--------|------------|
  * | Image    | `ImageViewer`   | Zoom (wheel, pinch, keyboard), pan, reset, fit-to-viewport |
- * | Video    | `VideoPlayer`   | Custom controls, ±10s skip, volume + mute, fullscreen |
+ * | Video    | `VideoPlayer`   | Custom controls, ±10s skip, volume + mute, fullscreen. Native-first; HEVC/H.265 the browser can't decode is transcoded to H.264 in-browser via a lazy-loaded WASM codec (download fallback otherwise) |
  * | Audio    | `AudioPlayer`   | Title, seekable bar, ±10s skip, volume + mute |
  * | PDF      | `PdfPreview`    | Virtualized pages, zoom, page input, thumbnail sidebar (lazy-loaded) |
  * | HEIC     | `NotSupportedPreview` | Fallback with download CTA (no native browser support) |
@@ -262,6 +264,40 @@ export const Video: Story = {
   render: () => <FilePreviewExample files={videoFiles} />,
 };
 
+/**
+ * HEVC/H.265 video. The codec is not in the mimetype (`video/mp4`, like a real
+ * upload), so the player is native-first: it hands the file to a normal
+ * `<video>` and only when that fails to decode does it lazy-load a WASM
+ * transcoder (`@hevcjs/core`) that converts the video to H.264 on the fly and
+ * plays it through Media Source Extensions, with the original audio passed
+ * through untouched. Safari plays HEVC natively (no transcode); browsers
+ * without WebCodecs fall back to a download prompt. A brief "preparing"
+ * spinner shows while the first segments transcode.
+ *
+ * Two samples (prev/next): a standard 8-bit clip, and a real iPhone capture
+ * (10-bit HDR, portrait, QuickTime container with AAC). The transcoder carries
+ * the source rotation, real duration and AAC audio across, so the result
+ * renders the same whether played natively or transcoded.
+ */
+export const HevcVideo: Story = {
+  render: () => <FilePreviewExample files={[hevcVideoFile, iphoneVideoFile]} />,
+};
+
+/**
+ * Forces the in-browser HEVC → H.264 transcoding path (via `forceVideoTranscode`),
+ * skipping the native attempt. Renders through the same `FilePreview` as every
+ * other story (identical chrome), so it's useful to exercise the transcoder on
+ * browsers that decode HEVC natively (Safari, or Chrome/Brave on Apple Silicon)
+ * where the native-first stories would just play the file directly. Uses the
+ * standard 8-bit clip; the iPhone sample in `HevcVideo` exercises the full case
+ * (rotation + audio + seekbar + HDR colour).
+ */
+export const HevcVideoForcedTranscode: Story = {
+  render: () => (
+    <FilePreviewExample files={[hevcVideoFile]} forceVideoTranscode />
+  ),
+};
+
 /**
  * Audio player with a title display, seekable duration bar, play/pause,
  * 10-second skip forward/backward, and volume controls with mute toggle.
diff --git a/src/components/preview/stories/fixtures.ts b/src/components/preview/stories/fixtures.ts
index 7d5a9754..d2a059d1 100644
--- a/src/components/preview/stories/fixtures.ts
+++ b/src/components/preview/stories/fixtures.ts
@@ -6,7 +6,7 @@ const file = (
   id: string,
   title: string,
   mimetype: string,
-  extras: Partial<FilePreviewType> = {},
+  extras: Partial<FilePreviewType> = {}
 ): FilePreviewType => ({
   id,
   title,
@@ -23,7 +23,7 @@ export const imageFiles: FilePreviewType[] = [
   file(
     "img-aic",
     "art-institute-of-chicago-ce0DXHdjbhw-unsplash 1.png",
-    "image/png",
+    "image/png"
   ),
 ];
 
@@ -31,6 +31,25 @@ export const videoFiles: FilePreviewType[] = [
   file("vid-chantier", "chantier.mp4", "video/mp4"),
 ];
 
+// HEVC/H.265 video in a plain mp4 container (mimetype `video/mp4`, like a real
+// upload — the codec isn't in the mimetype). Browsers without native HEVC
+// support transcode it to H.264 in the browser; Safari plays it natively.
+// Re-encoded from `chantier.mp4` with `ffmpeg -c:v libx265 -tag:v hvc1`.
+export const hevcVideoFile: FilePreviewType = file(
+  "vid-hevc",
+  "chantier-hevc.mp4",
+  "video/mp4"
+);
+
+// Real iPhone capture (QuickTime .mov): 10-bit Main 10 HEVC, HDR, portrait via
+// a 90° display matrix, AAC audio nested in a QuickTime `wave` atom. Exercises
+// the rotation, duration and audio-esds handling of the transcoder.
+export const iphoneVideoFile: FilePreviewType = file(
+  "vid-iphone",
+  "iphone-hevc.mov",
+  "video/quicktime"
+);
+
 export const audioFiles: FilePreviewType[] = [
   file("aud-noise", "nuissance_sonores.mp3", "audio/mpeg"),
 ];
@@ -44,7 +63,7 @@ export const pdfFiles: FilePreviewType[] = [
 export const heicFile: FilePreviewType = file(
   "heic-img",
   "IMG_7665.heic",
-  "image/heic",
+  "image/heic"
 );
 
 export const unsupportedFiles: FilePreviewType[] = [
@@ -62,7 +81,7 @@ export const wopiFile: FilePreviewType = {
   ...file(
     "wopi-tableau",
     "Tableau.xlsx",
-    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
   ),
   is_wopi_supported: true,
 };
@@ -71,6 +90,7 @@ export const wopiFile: FilePreviewType = {
 export const allFiles: FilePreviewType[] = [
   ...imageFiles,
   ...videoFiles,
+  hevcVideoFile,
   ...audioFiles,
   ...pdfFiles,
   heicFile,
diff --git a/src/components/preview/utils/hevcVideo.ts b/src/components/preview/utils/hevcVideo.ts
new file mode 100644
index 00000000..5e2065e2
--- /dev/null
+++ b/src/components/preview/utils/hevcVideo.ts
@@ -0,0 +1,787 @@
+// HEVC/H.265 video playback for the video player.
+//
+// Most browsers cannot decode HEVC natively (Safari and a few hardware-backed
+// Chrome builds are the exceptions). When a video element fails to play a file,
+// we transcode it to H.264 in the browser via `@hevcjs/core` (libde265 compiled
+// to WASM) and feed the result to the same `<video>` element through Media
+// Source Extensions.
+//
+// Pipeline:
+//   progressive HEVC mp4/mov
+//     → mp4box.js fragments each track into fMP4 (init + media segments)
+//     → MediaSource with two SourceBuffers:
+//         • video: each HEVC segment is transcoded to H.264 in the hevc.js
+//           transcode worker (WASM decode + WebCodecs encode) and appended.
+//         • audio: AAC segments appended untouched (passthrough).
+//     → <video> plays the muxed result with working duration/seeking + audio.
+//
+// We talk to the transcode worker directly rather than using
+// `installMSEIntercept()` / `TranscodeWorkerClient`, for two reasons:
+//   1. The decoder buffers frames in its DPB for B-frame reordering and only
+//      emits them on `flush()` at end of stream. The intercept never flushes,
+//      so short clips (whose frames never get "bumped" out by later segments)
+//      silently produce no video. The worker exposes a `flush` message; we use
+//      it. (`TranscodeWorkerClient` doesn't surface flush.)
+//   2. The worker loads the WASM glue via `importScripts`, which works under
+//      Vite's dev server — a main-thread `import()` of the served glue does not
+//      (Vite can't `import()` a file from `public/`).
+//
+// The decoder/worker/wasm assets are served from `/hevc/` (see the
+// `copy-hevc-worker` package script, run before storybook/build — the same
+// pattern used for the pdf.js worker). Everything in this module is loaded
+// lazily: the component only imports it once a video actually fails to play
+// natively, so the ~700 KB of codec assets never touch the main bundle.
+
+import {
+  createFile,
+  MP4BoxBuffer,
+  type ISOFile,
+  type Movie,
+  type Track,
+} from "mp4box";
+import { H264Encoder } from "@hevcjs/core";
+
+// Served asset locations. Copied from `@hevcjs/core/dist` into `public/hevc/`
+// by the `copy-hevc-worker` script (its package `exports` map doesn't expose
+// these sub-paths, so we cannot import them through the bundler directly).
+const HEVC_ASSET_BASE = "/hevc";
+const WORKER_URL = `${HEVC_ASSET_BASE}/transcode-worker.js`;
+const WASM_GLUE_URL = `${HEVC_ASSET_BASE}/hevc-decode.js`;
+const WASM_BINARY_URL = `${HEVC_ASSET_BASE}/hevc-decode.wasm`;
+
+// Number of samples per fMP4 fragment. Smaller = faster first frame but more
+// per-segment overhead; ~half a second of video at common frame rates.
+const SAMPLES_PER_FRAGMENT = 30;
+
+const HEVC_CODEC_RE = /^(hev1|hvc1)/i;
+
+const abortError = () =>
+  Object.assign(new Error("HEVC playback aborted"), { name: "AbortError" });
+
+export interface HevcPlaybackController {
+  /** Tear down MSE, release the worker/intercept and detach from the video. */
+  destroy: () => void;
+  /**
+   * Whether the source is HDR (HLG/PQ or BT.2020). The transcoder outputs SDR
+   * BT.709 without tone-mapping, so HDR sources look washed out — the player
+   * applies an approximate colour correction when this is set.
+   */
+  isHdr: boolean;
+}
+
+interface FragmentedTrack {
+  codec: string;
+  /** MSE source-buffer mime, e.g. `video/mp4; codecs="hvc1.1.6.L93.B0"`. */
+  mime: string;
+  initSegment: Uint8Array;
+  segments: Uint8Array[];
+  /** Source `tkhd` display matrix (9 fixed-point ints) — carries rotation. */
+  matrix?: number[];
+  /** Track duration in seconds (from the source container). */
+  durationSeconds?: number;
+  /** Whether the source video is HDR (HLG/PQ transfer or BT.2020 primaries). */
+  isHdr?: boolean;
+}
+
+const fourcc = (b: Uint8Array, i: number): string =>
+  String.fromCharCode(b[i], b[i + 1], b[i + 2], b[i + 3]);
+
+/** Find a direct child box of the given type within [start, end). */
+const findBox = (
+  b: Uint8Array,
+  dv: DataView,
+  type: string,
+  start: number,
+  end: number
+): { start: number; size: number } | null => {
+  let i = start;
+  while (i + 8 <= end) {
+    const size = dv.getUint32(i);
+    if (fourcc(b, i + 4) === type) return { start: i, size };
+    if (size < 8) break;
+    i += size;
+  }
+  return null;
+};
+
+/**
+ * iPhone/QuickTime `.mov` audio stores the AAC `esds` inside a QuickTime `wave`
+ * atom nested in the `mp4a` sample entry. Chrome's MSE parser (ISO-BMFF) doesn't
+ * look inside `wave`, so it reports "audio object type 0x0" and the append
+ * fails. This rewrites the init segment to place the `esds` directly in `mp4a`
+ * (ISO layout), dropping the `wave` wrapper, and returns the corrected codec
+ * string. Returns null if the layout isn't recognised (caller keeps the
+ * original / falls back to video-only).
+ */
+const liftQuickTimeAudioEsds = (
+  init: Uint8Array
+): { init: Uint8Array; codec: string } | null => {
+  const dv = new DataView(init.buffer, init.byteOffset, init.byteLength);
+  const len = init.length;
+
+  // Walk moov > trak > mdia > minf > stbl > stsd > mp4a.
+  const moov = findBox(init, dv, "moov", 0, len);
+  if (!moov) return null;
+  const trak = findBox(
+    init,
+    dv,
+    "trak",
+    moov.start + 8,
+    moov.start + moov.size
+  );
+  if (!trak) return null;
+  const mdia = findBox(
+    init,
+    dv,
+    "mdia",
+    trak.start + 8,
+    trak.start + trak.size
+  );
+  if (!mdia) return null;
+  const minf = findBox(
+    init,
+    dv,
+    "minf",
+    mdia.start + 8,
+    mdia.start + mdia.size
+  );
+  if (!minf) return null;
+  const stbl = findBox(
+    init,
+    dv,
+    "stbl",
+    minf.start + 8,
+    minf.start + minf.size
+  );
+  if (!stbl) return null;
+  const stsd = findBox(
+    init,
+    dv,
+    "stsd",
+    stbl.start + 8,
+    stbl.start + stbl.size
+  );
+  if (!stsd) return null;
+  // stsd is a FullBox: skip version/flags(4) + entry_count(4).
+  const mp4a = findBox(
+    init,
+    dv,
+    "mp4a",
+    stsd.start + 16,
+    stsd.start + stsd.size
+  );
+  if (!mp4a) return null;
+
+  // `mp4a` is an AudioSampleEntry: its child boxes start after the fixed sound
+  // fields (28 bytes for v0; QuickTime v1 adds 16, v2 adds 36). The version is
+  // the uint16 right after the 8-byte SampleEntry preamble.
+  const soundVersion = dv.getUint16(mp4a.start + 16);
+  const soundFields = soundVersion === 1 ? 44 : soundVersion === 2 ? 64 : 28;
+  const childStart = mp4a.start + 8 + soundFields;
+
+  const wave = findBox(init, dv, "wave", childStart, mp4a.start + mp4a.size);
+  if (!wave) return null; // already ISO layout — nothing to do.
+  const esds = findBox(
+    init,
+    dv,
+    "esds",
+    wave.start + 8,
+    wave.start + wave.size
+  );
+  if (!esds) return null;
+
+  // Derive the codec string from the AudioSpecificConfig (first 5 bits =
+  // audio object type) inside the esds DecoderSpecificInfo (tag 0x05).
+  let codec = "mp4a.40.2";
+  for (let i = esds.start + 8; i < esds.start + esds.size - 2; i++) {
+    if (init[i] === 0x05) {
+      // tag 0x05, then a (possibly multi-byte) length, then the ASC bytes.
+      let j = i + 1;
+      while (j < esds.start + esds.size && (init[j] & 0x80) !== 0) j++;
+      const asc0 = init[j + 1];
+      const objectType = asc0 >> 3;
+      if (objectType > 0) codec = `mp4a.40.${objectType}`;
+      break;
+    }
+  }
+
+  // Rebuild mp4a: [header][audio fields up to wave][esds][boxes after wave].
+  const fields = init.subarray(mp4a.start + 8, wave.start);
+  const esdsBytes = init.subarray(esds.start, esds.start + esds.size);
+  const after = init.subarray(wave.start + wave.size, mp4a.start + mp4a.size);
+  const newMp4aSize = 8 + fields.length + esdsBytes.length + after.length;
+  const delta = newMp4aSize - mp4a.size;
+
+  const out = new Uint8Array(len + delta);
+  const outDv = new DataView(out.buffer);
+  out.set(init.subarray(0, mp4a.start), 0);
+  outDv.setUint32(mp4a.start, newMp4aSize);
+  out.set([0x6d, 0x70, 0x34, 0x61], mp4a.start + 4); // 'mp4a'
+  let p = mp4a.start + 8;
+  out.set(fields, p);
+  p += fields.length;
+  out.set(esdsBytes, p);
+  p += esdsBytes.length;
+  out.set(after, p);
+  p += after.length;
+  out.set(init.subarray(mp4a.start + mp4a.size), p);
+
+  // Shrink every ancestor container box by the same delta.
+  for (const anc of [moov, trak, mdia, minf, stbl, stsd]) {
+    outDv.setUint32(anc.start, anc.size + delta);
+  }
+
+  return { init: out, codec };
+};
+
+/**
+ * Detect an HDR / wide-gamut source from the `colr` box in an init segment:
+ * PQ (transfer 16) or HLG (transfer 18) transfer, or BT.2020 primaries (9).
+ */
+const detectHdrFromInit = (init: Uint8Array): boolean => {
+  const dv = new DataView(init.buffer, init.byteOffset, init.byteLength);
+  for (let i = 0; i + 18 <= init.length; i++) {
+    if (fourcc(init, i + 4) === "colr") {
+      const primaries = dv.getUint16(i + 12);
+      const transfer = dv.getUint16(i + 14);
+      return transfer === 16 || transfer === 18 || primaries === 9;
+    }
+  }
+  return false;
+};
+
+const IDENTITY_MATRIX = [65536, 0, 0, 0, 65536, 0, 0, 0, 1073741824];
+
+const isIdentityMatrix = (m: number[]): boolean =>
+  m.length === 9 && m.every((v, i) => v === IDENTITY_MATRIX[i]);
+
+/**
+ * Overwrite the `tkhd` display matrix of an fMP4 init segment in place.
+ *
+ * The transcoder emits an identity matrix, so a rotated source (e.g. an iPhone
+ * portrait capture, whose frames are stored landscape + a 90° matrix) would
+ * play sideways/letterboxed. Copying the source matrix makes the browser apply
+ * the same rotation it would for native playback — so transcoded output renders
+ * identically.
+ */
+const applyDisplayMatrix = (init: Uint8Array, matrix: number[]): void => {
+  for (let i = 0; i + 8 <= init.length; i++) {
+    // 'tkhd'
+    if (
+      init[i + 4] === 0x74 &&
+      init[i + 5] === 0x6b &&
+      init[i + 6] === 0x68 &&
+      init[i + 7] === 0x64
+    ) {
+      const version = init[i + 8];
+      // matrix offset within the box: header(8) + fullbox(4) + fields, where
+      // creation/modification/duration are 4 bytes each (v0) or 8 each (v1).
+      const matrixOffset = i + 8 + (version === 1 ? 52 : 40);
+      if (matrixOffset + 36 > init.length) return;
+      const dv = new DataView(init.buffer, init.byteOffset, init.byteLength);
+      for (let k = 0; k < 9; k++) {
+        dv.setInt32(matrixOffset + k * 4, matrix[k], false);
+      }
+      return;
+    }
+  }
+};
+
+/**
+ * Whether the browser can decode HEVC natively (Safari, some Chrome builds).
+ * When true, a video that still fails to play is genuinely broken and
+ * transcoding won't help, so we can skip straight to the download fallback.
+ */
+export const hasNativeHevcSupport = (): boolean => {
+  if (typeof MediaSource === "undefined") {
+    return (
+      typeof document !== "undefined" &&
+      document
+        .createElement("video")
+        .canPlayType('video/mp4; codecs="hvc1.1.6.L93.B0"') !== ""
+    );
+  }
+  return (
+    MediaSource.isTypeSupported('video/mp4; codecs="hvc1.1.6.L93.B0"') ||
+    MediaSource.isTypeSupported('video/mp4; codecs="hev1.1.6.L93.B0"')
+  );
+};
+
+/** Whether in-browser HEVC → H.264 transcoding is possible in this browser. */
+export const canTranscodeHevc = async (): Promise<boolean> => {
+  if (typeof MediaSource === "undefined") return false;
+  try {
+    return H264Encoder.isSupported() && (await H264Encoder.checkSupport());
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * Demux one track (the first video or audio track) of a progressive mp4/mov
+ * into fragmented-mp4 segments using mp4box.js. Returns `null` when the file
+ * has no such track (e.g. a video without an audio track).
+ *
+ * Each track is fragmented in its own mp4box instance so we get a single-track
+ * init segment per track — `initializeSegmentation()` otherwise emits one moov
+ * covering every fragmented track, which can't initialise separate
+ * per-track SourceBuffers.
+ */
+const fragmentTrack = (
+  data: ArrayBuffer,
+  kind: "video" | "audio"
+): Promise<FragmentedTrack | null> =>
+  new Promise((resolve, reject) => {
+    const mp4: ISOFile = createFile();
+    const segments: Uint8Array[] = [];
+
+    mp4.onError = (_module: string, message: string) => {
+      reject(new Error(`mp4box: ${message}`));
+    };
+
+    mp4.onSegment = (
+      _id: number,
+      _user: unknown,
+      buffer: ArrayBuffer
+    ): void => {
+      segments.push(new Uint8Array(buffer));
+    };
+
+    mp4.onReady = (info: Movie): void => {
+      const track: Track | undefined =
+        kind === "video" ? info.videoTracks[0] : info.audioTracks[0];
+      if (!track) {
+        resolve(null);
+        return;
+      }
+
+      try {
+        mp4.setSegmentOptions(track.id, null, {
+          nbSamples: SAMPLES_PER_FRAGMENT,
+        });
+        const init = mp4.initializeSegmentation();
+        let initSegment = new Uint8Array(init.buffer);
+        let codecOverride: string | undefined;
+
+        // QuickTime (.mov) audio nests the AAC esds in a `wave` atom that MSE
+        // can't read — rewrite it to a clean ISO layout so audio plays.
+        if (kind === "audio") {
+          const fixed = liftQuickTimeAudioEsds(initSegment);
+          if (fixed) {
+            initSegment = fixed.init;
+            codecOverride = fixed.codec;
+          }
+        }
+
+        // Emit full segments from the already-buffered samples, then flush the
+        // trailing partial segment.
+        mp4.start();
+        mp4.flush();
+
+        // Note: some containers (notably iPhone .mov, whose QuickTime metadata
+        // atoms trip up mp4box) yield a bare `mp4a` codec with no object type —
+        // and a correspondingly broken esds. We deliberately keep the raw codec
+        // string: `MediaSource.isTypeSupported` then rejects it, so the caller
+        // skips audio and plays video-only rather than poisoning the stream.
+        // Capture the track display matrix (rotation) for video, so we can
+        // carry it onto the transcoded init segment.
+        const matrix =
+          kind === "video" && track.matrix
+            ? Array.from({ length: 9 }, (_, i) => Number(track.matrix[i]))
+            : undefined;
+        const durationSeconds =
+          track.timescale && track.duration
+            ? track.duration / track.timescale
+            : undefined;
+
+        const codec = codecOverride ?? track.codec;
+        resolve({
+          codec,
+          mime: `${kind}/mp4; codecs="${codec}"`,
+          initSegment,
+          segments,
+          matrix,
+          durationSeconds,
+          isHdr: kind === "video" ? detectHdrFromInit(initSegment) : undefined,
+        });
+      } catch (err) {
+        reject(err instanceof Error ? err : new Error(String(err)));
+      }
+    };
+
+    const buffer = MP4BoxBuffer.fromArrayBuffer(data, 0);
+    mp4.appendBuffer(buffer, true);
+  });
+
+/** Append one chunk to a SourceBuffer, resolving after `updateend`. */
+const appendChunk = (sb: SourceBuffer, chunk: Uint8Array): Promise<void> =>
+  new Promise((resolve, reject) => {
+    const cleanup = () => {
+      sb.removeEventListener("updateend", onDone);
+      sb.removeEventListener("error", onError);
+    };
+    const onDone = () => {
+      cleanup();
+      resolve();
+    };
+    const onError = () => {
+      cleanup();
+      reject(new Error("SourceBuffer append failed"));
+    };
+    sb.addEventListener("updateend", onDone);
+    sb.addEventListener("error", onError);
+    sb.appendBuffer(chunk);
+  });
+
+const appendAll = async (
+  sb: SourceBuffer,
+  chunks: Uint8Array[],
+  signal: AbortSignal
+): Promise<void> => {
+  for (const chunk of chunks) {
+    if (signal.aborted) throw abortError();
+    await appendChunk(sb, chunk);
+  }
+};
+
+/** Remove buffered coded frames past `untilSeconds` (resolves after updateend). */
+const trimBufferAfter = (
+  sb: SourceBuffer,
+  untilSeconds: number
+): Promise<void> => {
+  const { buffered } = sb;
+  if (
+    buffered.length === 0 ||
+    buffered.end(buffered.length - 1) <= untilSeconds + 0.5
+  ) {
+    return Promise.resolve();
+  }
+  return new Promise((resolve) => {
+    const done = () => {
+      sb.removeEventListener("updateend", done);
+      sb.removeEventListener("error", done);
+      resolve();
+    };
+    sb.addEventListener("updateend", done);
+    sb.addEventListener("error", done);
+    sb.remove(untilSeconds, Infinity);
+  });
+};
+
+interface TranscodeWorker {
+  /** Parse the HEVC init segment and return a matching H.264 init segment. */
+  prepareInit: (initSegment: Uint8Array) => Promise<{
+    initSegment: Uint8Array;
+    codec: string;
+  }>;
+  /** Transcode one HEVC media segment → H.264 fMP4 (null if no frames yet). */
+  transcode: (segment: Uint8Array) => Promise<Uint8Array | null>;
+  /** Flush the decoder/encoder reorder buffers → final H.264 segment, if any. */
+  flush: () => Promise<Uint8Array | null>;
+  destroy: () => void;
+}
+
+/**
+ * Minimal promise wrapper around the hevc.js transcode worker. Requests are
+ * strictly sequential (we await each before sending the next), so a single
+ * pending slot is enough — no message-id correlation needed.
+ */
+const createTranscodeWorker = async (): Promise<TranscodeWorker> => {
+  const worker = new Worker(WORKER_URL);
+  let pending: {
+    resolve: (msg: Record<string, unknown>) => void;
+    reject: (err: Error) => void;
+  } | null = null;
+
+  worker.onmessage = (e: MessageEvent) => {
+    const msg = e.data as Record<string, unknown>;
+    const slot = pending;
+    if (!slot) return;
+    pending = null;
+    if (msg.type === "error") {
+      slot.reject(new Error(String(msg.message ?? "transcode worker error")));
+    } else {
+      slot.resolve(msg);
+    }
+  };
+  worker.onerror = (e: ErrorEvent) => {
+    const slot = pending;
+    pending = null;
+    slot?.reject(new Error(e.message || "transcode worker crashed"));
+  };
+
+  const request = (
+    msg: Record<string, unknown>
+  ): Promise<Record<string, unknown>> =>
+    new Promise((resolve, reject) => {
+      pending = { resolve, reject };
+      worker.postMessage(msg);
+    });
+
+  await request({
+    type: "init",
+    config: { wasmUrl: WASM_GLUE_URL, wasmBinaryUrl: WASM_BINARY_URL },
+  });
+
+  return {
+    prepareInit: async (initSegment) => {
+      const res = await request({
+        type: "prepareInit",
+        id: 0,
+        data: initSegment,
+      });
+      return {
+        initSegment: new Uint8Array(res.initSegment as ArrayBuffer),
+        codec: res.codec as string,
+      };
+    },
+    transcode: async (segment) => {
+      const res = await request({ type: "mediaSegment", id: 1, data: segment });
+      return res.h264 ? new Uint8Array(res.h264 as ArrayBuffer) : null;
+    },
+    flush: async () => {
+      const res = await request({ type: "flush" });
+      return res.h264 ? new Uint8Array(res.h264 as ArrayBuffer) : null;
+    },
+    destroy: () => {
+      try {
+        worker.postMessage({ type: "destroy" });
+      } catch {
+        // Worker already gone.
+      }
+      worker.terminate();
+    },
+  };
+};
+
+/**
+ * Transcode a (likely-HEVC) progressive video and play it on `video` via MSE.
+ *
+ * Resolves once the `<video>` has a decoded frame (it can start playing) or,
+ * for very short clips whose frames only emerge at flush, once the whole stream
+ * has been transcoded. Rejects if the file isn't HEVC, the browser can't
+ * transcode, or no video frames could be produced — callers should fall back to
+ * a download prompt. Aborting `signal` cancels in-flight work and tears down.
+ */
+export const playHevcViaTranscoding = async (
+  video: HTMLVideoElement,
+  src: string,
+  signal: AbortSignal
+): Promise<HevcPlaybackController> => {
+  const response = await fetch(src, { signal });
+  if (!response.ok) {
+    throw new Error(`Failed to fetch video (${response.status})`);
+  }
+  const data = await response.arrayBuffer();
+  if (signal.aborted) throw abortError();
+
+  const videoTrack = await fragmentTrack(data, "video");
+  if (!videoTrack) {
+    throw new Error("No video track found");
+  }
+  if (!HEVC_CODEC_RE.test(videoTrack.codec)) {
+    // Not HEVC — transcoding can't help (the native failure was something else).
+    throw new Error(`Unsupported video codec: ${videoTrack.codec}`);
+  }
+  if (!(await canTranscodeHevc())) {
+    throw new Error("HEVC transcoding is not supported in this browser");
+  }
+
+  const audioTrack = await fragmentTrack(data, "audio");
+  if (signal.aborted) throw abortError();
+
+  // Set up the HEVC → H.264 transcode worker. `prepareInit` parses the HEVC
+  // init and produces a matching H.264 init segment up front (via a warmup
+  // frame) so we can create the SourceBuffer before the first media segment.
+  const transcoder = await createTranscodeWorker();
+  let h264Init: { initSegment: Uint8Array; codec: string };
+  try {
+    h264Init = await transcoder.prepareInit(videoTrack.initSegment);
+  } catch (err) {
+    transcoder.destroy();
+    throw err;
+  }
+  if (signal.aborted) {
+    transcoder.destroy();
+    throw abortError();
+  }
+
+  // Carry the source rotation (e.g. iPhone portrait captures) onto the
+  // transcoded init so playback matches native instead of showing sideways /
+  // letterboxed.
+  if (videoTrack.matrix && !isIdentityMatrix(videoTrack.matrix)) {
+    applyDisplayMatrix(h264Init.initSegment, videoTrack.matrix);
+  }
+
+  const mediaSource = new MediaSource();
+  const objectUrl = URL.createObjectURL(mediaSource);
+
+  let destroyed = false;
+  const destroy = () => {
+    if (destroyed) return;
+    destroyed = true;
+    try {
+      if (mediaSource.readyState === "open") mediaSource.endOfStream();
+    } catch {
+      // MediaSource already torn down.
+    }
+    try {
+      transcoder.destroy();
+    } catch {
+      // Already destroyed.
+    }
+    URL.revokeObjectURL(objectUrl);
+    video.removeAttribute("src");
+    try {
+      video.load();
+    } catch {
+      // Ignore — element may be detached.
+    }
+  };
+
+  if (signal.aborted) {
+    destroy();
+    throw abortError();
+  }
+  signal.addEventListener("abort", destroy, { once: true });
+
+  video.src = objectUrl;
+
+  try {
+    await new Promise<void>((resolve, reject) => {
+      let settled = false;
+      const settle = (run: () => void) => {
+        if (!settled) {
+          settled = true;
+          run();
+        }
+      };
+
+      // Resolve as soon as the element has a decoded frame so the spinner can
+      // hide while the rest keeps transcoding in the background.
+      video.addEventListener("loadeddata", () => settle(resolve), {
+        once: true,
+      });
+
+      const onSourceOpen = async () => {
+        try {
+          URL.revokeObjectURL(objectUrl);
+
+          // All SourceBuffers must be added up front: MSE rejects
+          // addSourceBuffer once any buffer has received data.
+          const videoSb = mediaSource.addSourceBuffer(
+            `video/mp4; codecs="${h264Init.codec}"`
+          );
+
+          // Audio passthrough — strictly best-effort. We only attempt it when
+          // the browser reports the exact codec as supported; if anything goes
+          // wrong we play video-only rather than failing (a failed append would
+          // otherwise poison the whole MediaSource, killing the video too).
+          let audioSb: SourceBuffer | null = null;
+          if (audioTrack && MediaSource.isTypeSupported(audioTrack.mime)) {
+            try {
+              audioSb = mediaSource.addSourceBuffer(audioTrack.mime);
+            } catch (err) {
+              console.warn("HEVC: audio unavailable, playing video-only", err);
+              audioSb = null;
+            }
+          } else if (audioTrack) {
+            console.warn(
+              `HEVC: audio codec "${audioTrack.codec}" unsupported, playing video-only`
+            );
+          }
+
+          // Append init segments (both buffers now exist).
+          await appendChunk(videoSb, h264Init.initSegment);
+          if (audioSb && audioTrack) {
+            try {
+              await appendChunk(audioSb, audioTrack.initSegment);
+            } catch (err) {
+              console.warn("HEVC: audio init failed, playing video-only", err);
+              audioSb = null;
+            }
+          }
+
+          // Append the (untouched) audio first — it's a fast passthrough (no
+          // transcode), so it's fully buffered before playback starts.
+          // Best-effort: drop audio on any error and continue video-only.
+          if (audioSb && audioTrack) {
+            try {
+              await appendAll(audioSb, audioTrack.segments, signal);
+            } catch (err) {
+              if (!signal.aborted) {
+                console.warn("HEVC: audio playback failed, video-only", err);
+              }
+            }
+          }
+
+          // Transcode each HEVC segment → H.264 and append it, then flush the
+          // decoder's reorder buffer at the end. The flush is what makes short
+          // clips work: their frames stay in the DPB until end of stream.
+          let producedVideo = false;
+          for (const segment of videoTrack.segments) {
+            if (signal.aborted) throw abortError();
+            const h264 = await transcoder.transcode(segment);
+            if (h264) {
+              await appendChunk(videoSb, h264);
+              producedVideo = true;
+            }
+          }
+          const tail = await transcoder.flush();
+          if (tail && !signal.aborted) {
+            await appendChunk(videoSb, tail);
+            producedVideo = true;
+          }
+
+          // Pin the media duration to the source's real duration. The
+          // transcoder can emit a stray sample with a corrupt presentation time
+          // (e.g. a B-frame negative composition offset misread as ~2^32),
+          // which would otherwise blow the seekbar out to millions of seconds.
+          // Trim any such out-of-range frames first, then shrink the duration
+          // (MSE rejects shrinking below buffered content).
+          const realDuration = videoTrack.durationSeconds;
+          if (
+            !signal.aborted &&
+            mediaSource.readyState === "open" &&
+            realDuration &&
+            Number.isFinite(realDuration)
+          ) {
+            try {
+              await trimBufferAfter(videoSb, realDuration);
+              if (audioSb) await trimBufferAfter(audioSb, realDuration);
+              if (mediaSource.readyState === "open") {
+                mediaSource.duration = realDuration;
+              }
+            } catch {
+              // Best-effort; the seekbar falls back to the buffered range.
+            }
+          }
+
+          if (!signal.aborted && mediaSource.readyState === "open") {
+            mediaSource.endOfStream();
+          }
+
+          if (!producedVideo) {
+            settle(() =>
+              reject(new Error("Transcoding produced no video frames"))
+            );
+          } else {
+            // In case `loadeddata` never fired (e.g. data already buffered).
+            settle(resolve);
+          }
+        } catch (err) {
+          settle(() =>
+            reject(err instanceof Error ? err : new Error(String(err)))
+          );
+        }
+      };
+      mediaSource.addEventListener("sourceopen", onSourceOpen, { once: true });
+    });
+  } catch (err) {
+    signal.removeEventListener("abort", destroy);
+    destroy();
+    throw err;
+  }
+
+  return { destroy, isHdr: videoTrack.isHdr === true };
+};
diff --git a/src/components/preview/viewers/video-player/VideoPlayer.scss b/src/components/preview/viewers/video-player/VideoPlayer.scss
index f7ec34d4..4c1ee5ea 100644
--- a/src/components/preview/viewers/video-player/VideoPlayer.scss
+++ b/src/components/preview/viewers/video-player/VideoPlayer.scss
@@ -34,6 +34,13 @@
     display: block;
     border-radius: 4px;
 
+    // Approximate HDR (HLG/BT.2020) → SDR correction for transcoded video. The
+    // transcoder doesn't tone-map, so HDR sources arrive washed out (low
+    // contrast, desaturated); nudge contrast/saturation back toward native.
+    &--tonemap {
+      filter: contrast(1.15) saturate(1.45);
+    }
+
     &__wrapper {
       position: relative;
       display: flex;
@@ -77,6 +84,38 @@
     gap: var(--c--globals--spacings--md);
     flex-shrink: 0; // Prevent controls from shrinking
   }
+
+  // Overlay shown while HEVC is transcoded to H.264 for playback.
+  &__transcoding {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    color: var(--c--contextuals--content--semantic--neutral--secondary);
+    font-size: 14px;
+  }
+
+  &__spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--c--contextuals--border--surface--primary);
+    border-top: 3px solid
+      var(--c--contextuals--content--semantic--brand--primary);
+    border-radius: 50%;
+    animation: video-player-spin 1s linear infinite;
+  }
+
+  @keyframes video-player-spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 }
 
 // Responsive design
diff --git a/src/components/preview/viewers/video-player/VideoPlayer.tsx b/src/components/preview/viewers/video-player/VideoPlayer.tsx
index 75262e8c..2e1dbd96 100644
--- a/src/components/preview/viewers/video-player/VideoPlayer.tsx
+++ b/src/components/preview/viewers/video-player/VideoPlayer.tsx
@@ -1,13 +1,25 @@
 "use client";
 
-import React, { useRef, useState, useEffect, useCallback } from "react";
+import React, {
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  forwardRef,
+} from "react";
 import clsx from "clsx";
 import { Icon } from ":/components/icon";
+import { useCustomTranslations } from ":/hooks/useCustomTranslations";
 import { DurationBar } from "../../components/duration-bar/DurationBar";
 import { PlayerPreviewControls } from "../../components/controls/PreviewControls";
+import type { HevcPlaybackController } from "../../utils/hevcVideo";
 
 interface VideoPlayerProps {
-  src: string;
+  /**
+   * Video source URL. May be omitted when the source is attached imperatively
+   * to the forwarded video element (e.g. a MediaSource stream).
+   */
+  src?: string;
   poster?: string;
   className?: string;
   autoPlay?: boolean;
@@ -20,253 +32,423 @@ interface VideoPlayerProps {
   onPause?: () => void;
   onEnded?: () => void;
   onTimeUpdate?: (currentTime: number) => void;
+  /**
+   * Skip the native playback attempt and transcode immediately. Useful to
+   * exercise/demo the HEVC transcoding path on browsers that decode HEVC
+   * natively (Safari, or Chrome/Brave on Apple Silicon).
+   */
+  forceTranscode?: boolean;
+  /**
+   * Rendered when the video can be neither played natively nor transcoded
+   * (e.g. an unsupported codec on a browser without WebCodecs). When omitted,
+   * the (empty) player is shown.
+   */
+  unsupportedFallback?: React.ReactNode;
 }
 
-export const VideoPlayer: React.FC<VideoPlayerProps> = ({
-  src,
-  poster,
-  className,
-  autoPlay = false,
-  muted = false,
-  loop = false,
-  controls = true,
-  width = "100%",
-  height = "auto",
-  onPlay,
-  onPause,
-  onEnded,
-  onTimeUpdate,
-}) => {
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [currentTime, setCurrentTime] = useState(0);
-  const [duration, setDuration] = useState(0);
-  const [volume, setVolume] = useState(1);
-  const [isMuted, setIsMuted] = useState(muted);
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const [showStatusIcon, setShowStatusIcon] = useState(false);
-  const [statusIcon, setStatusIcon] = useState<"play" | "pause">("play");
-
-  const togglePlay = useCallback(async () => {
-    if (videoRef.current) {
-      try {
-        if (isPlaying) {
-          videoRef.current.pause();
-        } else {
-          if (videoRef.current.readyState === 0) {
-            return;
-          }
-          await videoRef.current.play();
-        }
-      } catch (error) {
-        console.error("Error toggling play:", error);
-        setIsPlaying(false);
-      }
-    }
-  }, [isPlaying]);
+// Playback strategy. HEVC/H.265 can't be told apart from H.264 by mimetype, so
+// the player is native-first: it tries the browser, and only transcodes if the
+// element can't decode the source. See the effects below.
+type PlaybackMode = "native" | "transcoding" | "failed";
 
-  const handleVolumeChange = useCallback((newVolume: number) => {
-    setVolume(newVolume);
-    if (videoRef.current) {
-      videoRef.current.volume = newVolume;
-      setIsMuted(newVolume === 0);
-    }
-  }, []);
+const hasNativeHevcSupport = (): boolean =>
+  typeof MediaSource !== "undefined" &&
+  (MediaSource.isTypeSupported('video/mp4; codecs="hvc1.1.6.L93.B0"') ||
+    MediaSource.isTypeSupported('video/mp4; codecs="hev1.1.6.L93.B0"'));
 
-  const toggleMute = useCallback(() => {
-    if (videoRef.current) {
-      const newIsMuted = !isMuted;
-      videoRef.current.muted = newIsMuted;
-      setIsMuted(newIsMuted);
-    }
-  }, [isMuted]);
+export const VideoPlayer = forwardRef<HTMLVideoElement, VideoPlayerProps>(
+  (
+    {
+      src,
+      poster,
+      className,
+      autoPlay = false,
+      muted = false,
+      loop = false,
+      controls = true,
+      width = "100%",
+      height = "auto",
+      onPlay,
+      onPause,
+      onEnded,
+      onTimeUpdate,
+      forceTranscode = false,
+      unsupportedFallback = null,
+    },
+    forwardedRef
+  ) => {
+    const { t } = useCustomTranslations();
+    const videoRef = useRef<HTMLVideoElement>(null);
 
-  const handleSeek = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const newTime = parseFloat(e.target.value);
-    setCurrentTime(newTime);
-    if (videoRef.current) {
-      videoRef.current.currentTime = newTime;
-    }
-  }, []);
-
-  const toggleFullscreen = useCallback(() => {
-    if (videoRef.current) {
-      if (!isFullscreen) {
-        videoRef.current.controls = true;
-        if (videoRef.current.requestFullscreen) {
-          videoRef.current.requestFullscreen();
+    // Expose the underlying <video> through the forwarded ref while keeping the
+    // internal ref the player relies on.
+    const setVideoRef = useCallback(
+      (el: HTMLVideoElement | null) => {
+        videoRef.current = el;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(el);
+        } else if (forwardedRef) {
+          forwardedRef.current = el;
         }
-      } else {
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
+      },
+      [forwardedRef]
+    );
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+    const [volume, setVolume] = useState(1);
+    const [isMuted, setIsMuted] = useState(muted);
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [showStatusIcon, setShowStatusIcon] = useState(false);
+    const [statusIcon, setStatusIcon] = useState<"play" | "pause">("play");
+    const [playbackMode, setPlaybackMode] = useState<PlaybackMode>(
+      forceTranscode && src ? "transcoding" : "native"
+    );
+    const [transcodeReady, setTranscodeReady] = useState(false);
+    // Source is HDR and was transcoded to SDR — apply an approximate colour
+    // correction (the transcoder doesn't tone-map, so HDR looks washed out).
+    const [needsHdrCorrection, setNeedsHdrCorrection] = useState(false);
+
+    const togglePlay = useCallback(async () => {
+      if (videoRef.current) {
+        try {
+          if (isPlaying) {
+            videoRef.current.pause();
+          } else {
+            if (videoRef.current.readyState === 0) {
+              return;
+            }
+            await videoRef.current.play();
+          }
+        } catch (error) {
+          console.error("Error toggling play:", error);
+          setIsPlaying(false);
         }
       }
-    }
-  }, [isFullscreen]);
+    }, [isPlaying]);
 
-  const rewind10Seconds = useCallback(() => {
-    if (videoRef.current) {
-      const newTime = Math.max(0, currentTime - 10);
-      videoRef.current.currentTime = newTime;
-      setCurrentTime(newTime);
-    }
-  }, [currentTime]);
+    const handleVolumeChange = useCallback((newVolume: number) => {
+      setVolume(newVolume);
+      if (videoRef.current) {
+        videoRef.current.volume = newVolume;
+        setIsMuted(newVolume === 0);
+      }
+    }, []);
+
+    const toggleMute = useCallback(() => {
+      if (videoRef.current) {
+        const newIsMuted = !isMuted;
+        videoRef.current.muted = newIsMuted;
+        setIsMuted(newIsMuted);
+      }
+    }, [isMuted]);
 
-  const forward10Seconds = useCallback(() => {
-    if (videoRef.current) {
-      const newTime = Math.min(duration, currentTime + 10);
-      videoRef.current.currentTime = newTime;
+    const handleSeek = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+      const newTime = parseFloat(e.target.value);
       setCurrentTime(newTime);
-    }
-  }, [currentTime, duration]);
+      if (videoRef.current) {
+        videoRef.current.currentTime = newTime;
+      }
+    }, []);
 
-  const handleLoadedMetadata = () => {
-    if (videoRef.current) {
-      setDuration(videoRef.current.duration);
-      videoRef.current.controls = false;
-    }
-  };
+    const toggleFullscreen = useCallback(() => {
+      if (videoRef.current) {
+        if (!isFullscreen) {
+          videoRef.current.controls = true;
+          if (videoRef.current.requestFullscreen) {
+            videoRef.current.requestFullscreen();
+          }
+        } else {
+          if (document.exitFullscreen) {
+            document.exitFullscreen();
+          }
+        }
+      }
+    }, [isFullscreen]);
 
-  const handleTimeUpdate = () => {
-    if (videoRef.current) {
-      setCurrentTime(videoRef.current.currentTime);
-      onTimeUpdate?.(videoRef.current.currentTime);
-    }
-  };
-
-  const handlePlay = () => {
-    setIsPlaying(true);
-    setStatusIcon("play");
-    setShowStatusIcon(true);
-    setTimeout(() => setShowStatusIcon(false), 500);
-    onPlay?.();
-  };
-
-  const handlePause = () => {
-    setIsPlaying(false);
-    setStatusIcon("pause");
-    setShowStatusIcon(true);
-    setTimeout(() => setShowStatusIcon(false), 500);
-    onPause?.();
-  };
-
-  const handleEnded = () => {
-    setIsPlaying(false);
-    setCurrentTime(0);
-    onEnded?.();
-  };
-
-  const handleVolumeInput = () => {
-    if (videoRef.current) {
-      setVolume(videoRef.current.volume);
-    }
-  };
+    const rewind10Seconds = useCallback(() => {
+      if (videoRef.current) {
+        const newTime = Math.max(0, currentTime - 10);
+        videoRef.current.currentTime = newTime;
+        setCurrentTime(newTime);
+      }
+    }, [currentTime]);
+
+    const forward10Seconds = useCallback(() => {
+      if (videoRef.current) {
+        const newTime = Math.min(duration, currentTime + 10);
+        videoRef.current.currentTime = newTime;
+        setCurrentTime(newTime);
+      }
+    }, [currentTime, duration]);
 
-  const handleLoadStart = () => {
-    setIsPlaying(false);
-    setCurrentTime(0);
-    setDuration(0);
-  };
+    const handleLoadedMetadata = () => {
+      if (videoRef.current) {
+        // Only adopt a real, finite duration. MSE streams report `Infinity`
+        // until they end (resolved later via `durationchange`), which would
+        // otherwise render as "Infinity:NaN" in the controls.
+        const d = videoRef.current.duration;
+        if (Number.isFinite(d)) setDuration(d);
+        videoRef.current.controls = false;
+      }
+    };
 
-  useEffect(() => {
-    const handleFullscreenChange = () => {
-      const fullscreenElement = !!document.fullscreenElement;
-      setIsFullscreen(fullscreenElement);
+    // For Media Source streams the duration is `Infinity` at `loadedmetadata`
+    // and only resolves once the stream ends, via `durationchange`.
+    const handleDurationChange = () => {
+      const next = videoRef.current?.duration;
+      if (typeof next === "number" && Number.isFinite(next)) {
+        setDuration(next);
+      }
+    };
 
+    const handleTimeUpdate = () => {
       if (videoRef.current) {
-        if (fullscreenElement) {
-          videoRef.current.controls = true;
-        } else {
-          videoRef.current.controls = false;
-        }
+        setCurrentTime(videoRef.current.currentTime);
+        onTimeUpdate?.(videoRef.current.currentTime);
       }
     };
 
-    document.addEventListener("fullscreenchange", handleFullscreenChange);
-    return () => {
-      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    const handlePlay = () => {
+      setIsPlaying(true);
+      setStatusIcon("play");
+      setShowStatusIcon(true);
+      setTimeout(() => setShowStatusIcon(false), 500);
+      onPlay?.();
     };
-  }, []);
 
-  useEffect(() => {
-    if (videoRef.current) {
-      videoRef.current.currentTime = 0;
+    const handlePause = () => {
+      setIsPlaying(false);
+      setStatusIcon("pause");
+      setShowStatusIcon(true);
+      setTimeout(() => setShowStatusIcon(false), 500);
+      onPause?.();
+    };
+
+    const handleEnded = () => {
+      setIsPlaying(false);
+      setCurrentTime(0);
+      onEnded?.();
+    };
+
+    const handleVolumeInput = () => {
+      if (videoRef.current) {
+        setVolume(videoRef.current.volume);
+      }
+    };
+
+    const handleLoadStart = () => {
       setIsPlaying(false);
       setCurrentTime(0);
       setDuration(0);
-      setShowStatusIcon(false);
+    };
 
-      if (!videoRef.current.paused) {
-        videoRef.current.pause();
+    useEffect(() => {
+      const handleFullscreenChange = () => {
+        const fullscreenElement = !!document.fullscreenElement;
+        setIsFullscreen(fullscreenElement);
+
+        if (videoRef.current) {
+          if (fullscreenElement) {
+            videoRef.current.controls = true;
+          } else {
+            videoRef.current.controls = false;
+          }
+        }
+      };
+
+      document.addEventListener("fullscreenchange", handleFullscreenChange);
+      return () => {
+        document.removeEventListener(
+          "fullscreenchange",
+          handleFullscreenChange
+        );
+      };
+    }, []);
+
+    useEffect(() => {
+      if (videoRef.current) {
+        videoRef.current.currentTime = 0;
+        setIsPlaying(false);
+        setCurrentTime(0);
+        setDuration(0);
+        setShowStatusIcon(false);
+
+        if (!videoRef.current.paused) {
+          videoRef.current.pause();
+        }
       }
-    }
-  }, [src]);
+    }, [src]);
 
-  useEffect(() => {
-    if (videoRef.current) {
-      videoRef.current.volume = volume;
-    }
-  }, [volume]);
+    useEffect(() => {
+      if (videoRef.current) {
+        videoRef.current.volume = volume;
+      }
+    }, [volume]);
+
+    useEffect(() => {
+      if (videoRef.current) {
+        videoRef.current.muted = isMuted;
+      }
+    }, [isMuted]);
+
+    // Reset the playback strategy whenever the source changes.
+    useEffect(() => {
+      setPlaybackMode(forceTranscode && src ? "transcoding" : "native");
+      setTranscodeReady(false);
+      setNeedsHdrCorrection(false);
+    }, [src, forceTranscode]);
+
+    // Native-first HEVC handling: when the element can't decode the source,
+    // switch to transcoding — unless the browser already supports HEVC, in
+    // which case the failure is something transcoding can't fix.
+    //
+    // Two failure shapes to catch:
+    //   • an `error` event (e.g. Firefox rejects the codec outright), and
+    //   • a "silent" failure (Chrome/Brave parse the container, fire loadeddata
+    //     and even play the audio, but never decode a video frame) — detectable
+    //     because the element exposes no intrinsic video size.
+    useEffect(() => {
+      if (playbackMode !== "native" || !src) return;
+      const video = videoRef.current;
+      if (!video) return;
+
+      const evaluate = () => {
+        const undecodable =
+          !!video.error ||
+          (video.readyState >= video.HAVE_METADATA &&
+            video.videoWidth === 0 &&
+            video.videoHeight === 0);
+        if (undecodable) {
+          setPlaybackMode(hasNativeHevcSupport() ? "failed" : "transcoding");
+        }
+      };
+
+      video.addEventListener("error", evaluate);
+      video.addEventListener("loadedmetadata", evaluate);
+      video.addEventListener("loadeddata", evaluate);
+      // Metadata may already have arrived before these listeners attached.
+      evaluate();
+
+      return () => {
+        video.removeEventListener("error", evaluate);
+        video.removeEventListener("loadedmetadata", evaluate);
+        video.removeEventListener("loadeddata", evaluate);
+      };
+    }, [playbackMode, src]);
+
+    // Transcoding pipeline. The WASM codec is lazy-loaded so it only downloads
+    // when a video actually needs it (kept out of the main bundle).
+    useEffect(() => {
+      if (playbackMode !== "transcoding" || !src) return;
+      const video = videoRef.current;
+      if (!video) return;
 
-  useEffect(() => {
-    if (videoRef.current) {
-      videoRef.current.muted = isMuted;
+      const controller = new AbortController();
+      let playback: HevcPlaybackController | null = null;
+      setTranscodeReady(false);
+
+      import("../../utils/hevcVideo")
+        .then(({ playHevcViaTranscoding }) =>
+          playHevcViaTranscoding(video, src, controller.signal)
+        )
+        .then((ctrl) => {
+          if (controller.signal.aborted) {
+            ctrl.destroy();
+            return;
+          }
+          playback = ctrl;
+          setTranscodeReady(true);
+          setNeedsHdrCorrection(ctrl.isHdr);
+        })
+        .catch((err) => {
+          if (controller.signal.aborted) return;
+          console.error("VideoPlayer: HEVC transcoding failed", err);
+          setPlaybackMode("failed");
+        });
+
+      return () => {
+        controller.abort();
+        playback?.destroy();
+      };
+    }, [playbackMode, src]);
+
+    if (playbackMode === "failed" && unsupportedFallback) {
+      return <>{unsupportedFallback}</>;
     }
-  }, [isMuted]);
 
-  return (
-    <div className={clsx("video-player", className)} style={{ width, height }}>
+    return (
       <div
-        className="video-player__video__wrapper"
-        onMouseLeave={() => setShowStatusIcon(false)}
+        className={clsx("video-player", className)}
+        style={{ width, height }}
       >
-        <video
-          ref={videoRef}
-          src={src}
-          poster={poster}
-          autoPlay={autoPlay}
-          muted={muted}
-          loop={loop}
-          controls={false}
-          onLoadedMetadata={handleLoadedMetadata}
-          onTimeUpdate={handleTimeUpdate}
-          onPlay={handlePlay}
-          onPause={handlePause}
-          onEnded={handleEnded}
-          onVolumeChange={handleVolumeInput}
-          onClick={togglePlay}
-          className="video-player__video"
-          onLoadStart={handleLoadStart}
-        />
-        {showStatusIcon && (
-          <div className="video-player__status-icon">
-            <Icon name={statusIcon === "play" ? "play_arrow" : "pause"} />
+        <div
+          className="video-player__video__wrapper"
+          onMouseLeave={() => setShowStatusIcon(false)}
+        >
+          <video
+            ref={setVideoRef}
+            // In transcoding mode the source is attached imperatively via MSE.
+            src={playbackMode === "native" ? src : undefined}
+            poster={poster}
+            autoPlay={autoPlay}
+            muted={muted}
+            loop={loop}
+            controls={false}
+            onLoadedMetadata={handleLoadedMetadata}
+            onDurationChange={handleDurationChange}
+            onTimeUpdate={handleTimeUpdate}
+            onPlay={handlePlay}
+            onPause={handlePause}
+            onEnded={handleEnded}
+            onVolumeChange={handleVolumeInput}
+            onClick={togglePlay}
+            className={clsx("video-player__video", {
+              "video-player__video--tonemap": needsHdrCorrection,
+            })}
+            onLoadStart={handleLoadStart}
+          />
+          {showStatusIcon && (
+            <div className="video-player__status-icon">
+              <Icon name={statusIcon === "play" ? "play_arrow" : "pause"} />
+            </div>
+          )}
+          {playbackMode === "transcoding" && !transcodeReady && (
+            <div
+              className="video-player__transcoding"
+              data-preview-backdrop="true"
+            >
+              <div className="video-player__spinner" />
+              <span>{t("components.filePreview.video.preparing")}</span>
+            </div>
+          )}
+        </div>
+
+        {controls && !isFullscreen && (
+          <div className="video-player__controls">
+            <DurationBar
+              duration={duration}
+              currentTime={currentTime}
+              handleSeek={handleSeek}
+            />
+            <PlayerPreviewControls
+              togglePlay={togglePlay}
+              isPlaying={isPlaying}
+              rewind10Seconds={rewind10Seconds}
+              forward10Seconds={forward10Seconds}
+              volume={volume}
+              isMuted={isMuted}
+              toggleMute={toggleMute}
+              handleVolumeChange={handleVolumeChange}
+              toggleFullscreen={toggleFullscreen}
+              isFullscreen={isFullscreen}
+              showFullscreenBtn={true}
+            />
           </div>
         )}
       </div>
+    );
+  }
+);
 
-      {controls && !isFullscreen && (
-        <div className="video-player__controls">
-          <DurationBar
-            duration={duration}
-            currentTime={currentTime}
-            handleSeek={handleSeek}
-          />
-          <PlayerPreviewControls
-            togglePlay={togglePlay}
-            isPlaying={isPlaying}
-            rewind10Seconds={rewind10Seconds}
-            forward10Seconds={forward10Seconds}
-            volume={volume}
-            isMuted={isMuted}
-            toggleMute={toggleMute}
-            handleVolumeChange={handleVolumeChange}
-            toggleFullscreen={toggleFullscreen}
-            isFullscreen={isFullscreen}
-            showFullscreenBtn={true}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
+VideoPlayer.displayName = "VideoPlayer";
diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 20490c50..a27d7a2d 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -121,7 +121,8 @@
         "disclaimer": "Unsupported format.",
         "description": "To view the file, download it to your device.",
         "download": "Download file",
-        "heicTitle": "HEIC files are not yet supported for preview."
+        "heicTitle": "HEIC files are not yet supported for preview.",
+        "videoTitle": "This video format is not supported for preview."
       },
       "suspicious": {
         "title": "Suspicious file",
@@ -141,6 +142,9 @@
       "image": {
         "loading": "Loading image..."
       },
+      "video": {
+        "preparing": "Preparing video…"
+      },
       "externalLink": {
         "title": "External link",
         "description": "You are about to leave this page and be redirected to:",
diff --git a/src/locales/fr-FR.json b/src/locales/fr-FR.json
index 1d333c6f..51b1937c 100644
--- a/src/locales/fr-FR.json
+++ b/src/locales/fr-FR.json
@@ -120,7 +120,8 @@
         "disclaimer": "Format non supporté.",
         "description": "Pour visualiser le fichier, téléchargez-le sur votre appareil.",
         "download": "Télécharger le fichier",
-        "heicTitle": "Les fichiers HEIC ne sont pas encore supportés pour la prévisualisation."
+        "heicTitle": "Les fichiers HEIC ne sont pas encore supportés pour la prévisualisation.",
+        "videoTitle": "Ce format vidéo n'est pas pris en charge pour la prévisualisation."
       },
       "suspicious": {
         "title": "Fichier suspect",
@@ -140,6 +141,9 @@
       "image": {
         "loading": "Chargement de l'image..."
       },
+      "video": {
+        "preparing": "Préparation de la vidéo…"
+      },
       "externalLink": {
         "title": "Lien externe",
         "description": "Vous êtes sur le point de quitter cette page et d'être redirigé vers :",
diff --git a/src/locales/nl-NL.json b/src/locales/nl-NL.json
index c16951d0..97ca0236 100644
--- a/src/locales/nl-NL.json
+++ b/src/locales/nl-NL.json
@@ -120,7 +120,8 @@
         "disclaimer": "Format niet ondersteund.",
         "description": "Om het bestand te bekijken, downloadt u het naar uw apparaat.",
         "download": "Bestand downloaden",
-        "heicTitle": "HEIC-bestanden worden nog niet ondersteund voor voorbeeld."
+        "heicTitle": "HEIC-bestanden worden nog niet ondersteund voor voorbeeld.",
+        "videoTitle": "Dit videoformaat wordt niet ondersteund voor voorbeeld."
       },
       "suspicious": {
         "title": "Verdacht bestand",
@@ -140,6 +141,9 @@
       "image": {
         "loading": "Afbeelding laden..."
       },
+      "video": {
+        "preparing": "Video voorbereiden…"
+      },
       "externalLink": {
         "title": "Externe link",
         "description": "U staat op het punt deze pagina te verlaten en te worden doorgestuurd naar:",
diff --git a/yarn.lock b/yarn.lock
index d6c64330..77281b49 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1332,6 +1332,13 @@
   resolved "https://registry.yarnpkg.com/@gouvfr-lasuite/integration/-/integration-1.0.2.tgz#ed0000f4b738c5a19bb60f5b80a9a2f5d9414234"
   integrity sha512-npOotZQSyu6SffHiPP+jQVOkJ3qW2KE2cANhEK92sNLX9uZqQaCqljO5GhzsBmh0lB76fiXnrr9i8SIpnDUSZg==
 
+"@hevcjs/core@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@hevcjs/core/-/core-1.3.0.tgz#84698749befb5a9426dbb20738f1f4aa7230476b"
+  integrity sha512-R14G7ebdBno4gCyl+12cTUe2VD40KxDwDcfKY6xGTfG+Ofwx/xerRfqyRG7/WDP0kYdqqAbtrh5WBkhaftKTcQ==
+  dependencies:
+    mp4box "^2.3.0"
+
 "@humanfs/core@^0.19.1":
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/@humanfs/core/-/core-0.19.1.tgz#17c55ca7d426733fe3c561906b8173c336b40a77"
@@ -7295,6 +7302,11 @@ mlly@^1.7.3, mlly@^1.7.4:
     pkg-types "^1.3.1"
     ufo "^1.6.1"
 
+mp4box@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/mp4box/-/mp4box-2.3.0.tgz#6fd923e0fd4cc3642e8a512d80253310028c30df"
+  integrity sha512-nnABYbdh4UguEYyV+uRwQBi1tbb8kXka2Fx9yKzmDKAeh8gkvRKYxoK1XDd8GQIjSfN4rvsXrW1CBo4yRQJZDA==
+
 mrmime@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-2.0.1.tgz#bc3e87f7987853a54c9850eeb1f1078cd44adddc"