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!