I am trying to make this video possible to play in Safari on iOS: https://ekgcamp.com/api/videos/video1.mp4

The video works for desktop Chrome and OSX safari, but I have been struggling for days to make it play on iOS safari. Also, I am unsure how to debug it. The API supports range requests, and the video CODEC is AAC, H.264.

The API endpoint looks as follows:

import type { NextApiRequest, NextApiResponse } from "next";
import fs from "fs";

const handler = (req: NextApiRequest, res: NextApiResponse) => {
  const { videoName } = req.query;
  const filePath = `files/videos/${videoName}`;
  const stat = fs.statSync(filePath);
  const fileSize = stat.size;
  const range = req.headers.range;
  if (range) {
    const parts = range.replace(/bytes=/, "").split("-");
    const start = parseInt(parts[0], 10);
    const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
    const chunksize = end - start + 1;
    const file = fs.createReadStream(filePath, { start, end });
    const head = {
      "Content-Range": `bytes ${start}-${end}/${fileSize}`,
      "Accept-Ranges": "bytes",
      "Content-Length": chunksize,
      "Content-Type": "video/mp4",
    };
    res.writeHead(206, head);
    file.pipe(res);
  } else {
    const head = {
      "Content-Length": fileSize,
      "Content-Type": "video/mp4",
    };
    res.writeHead(200, head);
    fs.createReadStream(filePath).pipe(res);
  }
};

export default handler;

The following headers are sent to and from Chrome and iOS safari

Chrome:

From: bytes=0-
To: {
  'Content-Range': 'bytes 0-397376/397377',
  'Accept-Ranges': 'bytes',
  'Content-Length': 397377,
  'Content-Type': 'video/mp4'
}

bytes=163840-
{
  'Content-Range': 'bytes 163840-397376/397377',
  'Accept-Ranges': 'bytes',
  'Content-Length': 233537,
  'Content-Type': 'video/mp4'
}

iOS:

bytes=0-1
{
  'Content-Range': 'bytes 0-1/397377',
  'Accept-Ranges': 'bytes',
  'Content-Length': 2,
  'Content-Type': 'video/mp4'
}

bytes=0-397376
{
  'Content-Range': 'bytes 0-397376/397377',
  'Accept-Ranges': 'bytes',
  'Content-Length': 397377,
  'Content-Type': 'video/mp4'
}

How do I make it work on both desktop and iOS? Cheers.