Video playback weird when using `serveStatic` instead of `publicAssets`

import { defineEventHandler, serveStatic } from "h3";
import { stat, readFile } from "node:fs/promises";
import { join, resolve } from "node:path";

export default defineEventHandler((event) => {
  const runtimeConfig = useRuntimeConfig();
  const publicDir = resolve(runtimeConfig.paths.drive);

  function cleanupId(id: string) {
    return id.replace("/content", "");
  }

  return serveStatic(event, {
    getContents: (id) => {
      return readFile(join(publicDir, cleanupId(id)));
    },

    getMeta: async (id) => {
      const stats = await stat(join(publicDir, cleanupId(id))).catch(() => {});

      if (!stats || !stats.isFile()) {
        return;
      }

      return {
        size: stats.size,
        mtime: stats.mtimeMs,
      };
    },
  });
});

import { defineEventHandler, serveStatic } from "h3";
import { stat, readFile } from "node:fs/promises";
import { join, resolve } from "node:path";

export default defineEventHandler((event) => {
  const runtimeConfig = useRuntimeConfig();
  const publicDir = resolve(runtimeConfig.paths.drive);

  function cleanupId(id: string) {
    return id.replace("/content", "");
  }

  return serveStatic(event, {
    getContents: (id) => {
      return readFile(join(publicDir, cleanupId(id)));
    },

    getMeta: async (id) => {
      const stats = await stat(join(publicDir, cleanupId(id))).catch(() => {});

      if (!stats || !stats.isFile()) {
        return;
      }

      return {
        size: stats.size,
        mtime: stats.mtimeMs,
      };
    },
  });
});