Video Seek Functionality Not Working with Upload Field

[peterkunsay]

Describe the Bug

Hello,

First of all, thank you for Payload 3. It's a very nice update!

Unfortunately, I encountered a bug with the Upload Field when using it for videos. When a video is serialized (e.g., inside rich text via custom converter), the video is displayed correctly on the website; however, the seek functionality is broken. Whenever you try to jump to a different timestamp in the video, it always jumps back to the current playback location. This occurs with the vanilla video player, and I also experienced the same issue with next-video.
I suspect there might be an issue with the upload itself, possibly related to metadata?

This issue has already been discussed on Payload's Discord:
https://discord.com/channels/967097582721572934/1302281442465939477

The reproduction repo I included clearly demonstrates the issue.

Keep up the good work!

Link to the code that reproduces this issue

https://github.com/peterkunsay/payload-video-upload-seek-bug-reproduction/tree/main

Reproduction Steps

• Upload video using upload field
• Serialize it in some way
• Try to jump to any location in the video timestamp

Which area(s) are affected? (Select all that apply)

plugin: richtext-lexical, plugin: other

Environment Info

Used pnpx create-payload-app@latest -t blank

Binaries:
  Node: 20.9.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.1.5
  @payloadcms/richtext-lexical: 3.22.0
  @payloadcms/translations: 3.22.0
  react: 19.0.0
  react-dom: 19.0.0
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 65292
  Available CPU cores: 32

[JessChowdhury]

Hi @peterkunsay - thanks for opening this issue and providing a reproduction! Can you explain what you mean by serialize it in some way from your reproduction steps? A screen recording would be super helpful if possible

• Upload video using upload field
• Serialize it in some way
• Try to jump to any location in the video timestamp

[peterkunsay]

Hello @JessChowdhury, thanks for the reply!

By "serialize it in some way," I meant using the video from the Upload Field via the payload-provided URL at the frontend.

Here's what I did:

1. Used pnpx create-payload-app@latest -t blank

2. Created an upload field:

import type { CollectionConfig } from 'payload'

export const Media: CollectionConfig = {
  slug: 'media',
  access: {
    read: () => true,
  },
  fields: [
  ],
  upload: {
      staticDir: 'media/video',
      mimeTypes: ['video/x-msvideo', 'video/mp4', 'video/mpeg', 'video/ogg', 'video/mp2t', 'video/webm']
  },
}

3. Uploaded a video using the admin panel

4. Attempted to use the video via the URL within the application. In my reproduction repository, I demonstrated the issue via RichText:

import { HTMLConverter, HTMLConverterFeature, lexicalEditor, lexicalHTML } from "@payloadcms/richtext-lexical"
import { CollectionConfig } from "payload"

type Converter = HTMLConverter<any>

const VideoHTMLConverter: Converter = {
    converter: async ({ node, converters, parent, req, draft, overrideAccess, showHiddenFields, currentDepth, depth }) => {
        if (node.type === 'upload' && node.relationTo === 'media' && node.value) {
            const doc = (await req?.payload?.findByID({
                collection: "media",
                id: node.value
            })) || undefined;

            return doc ? `<video controls width="100%">
                <source src="${doc.url}" type="${doc.mimeType || "video/mp4"}">
                Your browser does not support the video tag.
            </video>` : `[Video not found]`
        }
        return "non media";
    },
    nodeTypes: ['upload']
}

const RichText: CollectionConfig = {
    slug: 'richText',
    access: {
        read: () => true,
    },
    fields: [
        {
            name: 'text',
            type: 'richText',
            editor: lexicalEditor({
                features: ({ defaultFeatures }) => [
                    ...defaultFeatures,
                    HTMLConverterFeature({
                        converters: ({ defaultConverters }) => {
                            return [
                                ...defaultConverters,
                                VideoHTMLConverter,
                            ]
                        }
                    }),
                ]
            }),
            required: true,
            localized: true,
        },
        lexicalHTML('text', { name: 'textHtml' }),
    ],
    hooks: {
        afterChange: [],
        afterDelete: [],
        beforeLogin: [],
        beforeChange: [],
    },
}

export default RichText

and

import { headers as getHeaders } from 'next/headers.js'
import Image from 'next/image'
import { getPayload } from 'payload'
import React from 'react'
import { fileURLToPath } from 'url'

import config from '@/payload.config'
import './styles.css'

export default async function HomePage() {
  const headers = await getHeaders()
  const payloadConfig = await config
  const payload = await getPayload({ config: payloadConfig })
  const { user } = await payload.auth({ headers })

  const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`

  const getRich = async () => {
    return (await payload.find({
      collection: "richText"
    })).docs[0] || undefined;
  }

  const doc = await getRich();

  return (
    <div className="home">
      <div className="content">
        {doc && <div className='Content' dangerouslySetInnerHTML={{ __html: doc.textHtml as string }}></div>}
      </div>
    </div>
  )
}

Please note that the issue is not related to serialization. Even if we copy the video URL and use it directly inside the source tag of the video element like:
<source src="http://192.168.1.184:3000/api/media/file/%5B4K%5D%20Rick%20Astley%20-%20Never%20Gonna%20Give%20You%20Up%20(but%20with%20no%20sound)%20-%20Celestial04%20(720p%2C%20h264).mp4" type="video/mp4">
the issue persists.

I suspect there is an issue with the upload mechanism itself. Probably releated to metadata?

Video demonstrating the issue:

Desktop.2025.02.12.-.20.02.48.03.mp4

[JessChowdhury]

Thanks @peterkunsay for your detailed reply - I completely see what you are describing now.

At the moment, Payload uses sharp behind the scenes for media uploads, unfortunately this package does not do much for video formats. We would need to evaluate integrating another library like FFmpeg or outline a plan to build our own functionality.

I'm going to convert this to a feature request for now so we can plan it in accordingly. Thanks again for raising this!

[marpstar]

@peterkunsay I've got a Payload app that relies on "streaming" of video files and have had similar issues. I ended up writing a custom Next endpoint to grab the file from the upload directory and send a streaming response to the client. I've got the following in a src/app/files/[filename]/route.ts file, which I can then call via a request to /files/filename.mp4

import { getSession } from "@/src/common/core/get-session";
import fs from "fs";
import { readFile } from "fs/promises";
import mime from "mime-types";
import { notFound } from "next/navigation";


type Args = {
  params: Promise<{
    filename?: string
  }>
}

export async function GET(
  request: Request,
  { params }: Args
) {
  const { filename } = await params;

  if (!filename) notFound();

  const nextAuthSession = await getSession();

  if (!nextAuthSession) {
    return new Response("Unauthorized", { status: 401 });
  }

  const uploadDir = process.env.PAYLOAD_UPLOADS_DIR || "./public";

  const filePath = `${uploadDir}/${filename}`;

  if (!fs.existsSync(filePath)) {
    return new Response("File not found", { status: 404 });
  }

  const bytes = await readFile(filePath);

  const mimeType = mime.lookup(filePath) || "application/octet-stream";

  // if it's a video, and the client has requested a range, return a partial response
  const range = request.headers.get("range");

  if (range && mimeType.startsWith("video")) {
    // Validate range header format
    const parts = range.replace(/bytes=/, "").split("-");
    if (parts.length !== 2) {
      return new Response("Invalid range header", { status: 400 });
    }

    const [start, end] = parts;
    const fileSize = bytes.length;

    // Convert and validate start position
    const nStart = Number(start);
    if (isNaN(nStart) || nStart < 0 || nStart >= fileSize) {
      return new Response("Invalid range", { status: 416 });
    }

    // Convert and validate end position
    let nEnd = end ? Number(end) : Math.min(nStart + (10 ** 6), fileSize - 1);
    if (isNaN(nEnd) || nEnd >= fileSize) {
      nEnd = fileSize - 1;
    }

    // Ensure start is before end
    if (nStart > nEnd) {
      return new Response("Invalid range", { status: 416 });
    }

    const chunksize = (nEnd - nStart) + 1;

    return new Response(bytes.slice(nStart, nEnd + 1), {
      status: 206,
      headers: {
        "Content-Range": `bytes ${nStart}-${nEnd}/${fileSize}`,
        "Accept-Ranges": "bytes",
        "Content-Length": chunksize.toString(),
        "Content-Type": mimeType,
      },
    });
  }

  return new Response(bytes, {
    headers: {
      "Content-Type": mimeType,
      "Accept-Ranges": "bytes",
      "Content-Length": bytes.byteLength.toString()
    },
  });
}

I've got an added auth layer in this code that you can either remove or swap out.