Next.js Discord

Discord Forum

Show Loading when video is being downloaded in the hero section

Answered
Cape May Warbler posted this in #help-forum
Open in Discord
Cape May WarblerOP
Hi, I'm using payload cms, problem is that video my client uses for his hero section is 77MB or so which is huge. When video is loading only white square is shown, and I would like to show some real indicator which would look legitimate because right now it looks like page is incomplete. Thanks for help in advance
Answered by joulev
Many tactics to handle videos:
* Optimise its size. Anything higher than HD is unlikely to be necessary, you don’t need a 7000x4000 video you only need 1920x1080. MP4 can be optimised as well. Then we also have webm
* Get the first frame of the video and use it as placeholder to render while the video loads
* Add special stuff to the video to let it play as it is streamed in compared to it only playing after the entire video has been fully downloaded
View full answer

24 Replies

Cape May WarblerOP
I wonder if maybe I could create server component that would load my video asynchronously and wrap it in suspense?
@Yellow-bellied Flycatcher Did it work?
Cape May WarblerOP
Not really, tried generating url blob but it resulted in infinite loading for some reason
@Cape May Warbler Not really, tried generating url blob but it resulted in infinite loading for some reason
Yellow-bellied Flycatcher
Did the req to the vid complete because it will not stop loading until a rejection or completed
@Yellow-bellied Flycatcher Did the req to the vid complete because it will not stop loading until a rejection or completed
Cape May WarblerOP
Can't really say, with given code:
'use server'

import { ComponentProps } from 'react'

type Props = ComponentProps<'video'>

export async function VideoBlob(props: Props) {
  const { src, ...rest } = props
  const res = await fetch(src!)
  const blob = await res.blob()
  const img = URL.createObjectURL(blob)

  return (
    <video src={img} {...rest}>
      {props.children}
    </video>
  )
}

It makes get request every like 15ms resulting in 403
Yellow-bellied Flycatcher
Try clearing cache, your request is being rejected.
Cape May WarblerOP
Well, why does it retry every 15ms or so
Previously I was getting 200 and it didn't show either
Maybe I'll put all code related to it
@Cape May Warbler Hi, I'm using payload cms, problem is that video my client uses for his hero section is 77MB or so which is huge. When video is loading only white square is shown, and I would like to show some real indicator which would look legitimate because right now it looks like page is incomplete. Thanks for help in advance
joulev
Many tactics to handle videos:
* Optimise its size. Anything higher than HD is unlikely to be necessary, you don’t need a 7000x4000 video you only need 1920x1080. MP4 can be optimised as well. Then we also have webm
* Get the first frame of the video and use it as placeholder to render while the video loads
* Add special stuff to the video to let it play as it is streamed in compared to it only playing after the entire video has been fully downloaded
Answer
joulev
No you don’t want manual fetch(). You should just stick to <video> and let browsers handle the autoplays and caching
Cape May WarblerOP
I don't think I can do streaming with payload, I mean video is living in the nextjs directory when its uploaded but doesnt streaming require special endpoint?
@Cape May Warbler I don't think I can do streaming with payload, I mean video is living in the nextjs directory when its uploaded but doesnt streaming require special endpoint?
joulev
MP4 is a streamable format. As long as your MP4 file is streamable you just need to put the <video> with the src pointing to the video url and browsers will handle streaming for you. Nextjs does nothing here, it works even for videos not owned by you.

About whether your mp4 is streamable (its metadata is placed at the beginning and not the end), you’ll have to google here i don’t remember, but it is some ffmpeg flags
Cape May WarblerOP
Thanks a lot, u were already great help
joulev
Either way compress your video first. 77MB is too big. Aim for 1MB or less. Sacrifice quality or fps or both if needed – your users don’t need a high quality video when they’re just gonna play it on a mobile screen for example, if you know what I mean
Cape May WarblerOP
Yeah, I get it, it will be more difficult to make client do it
joulev
I think you should do it based on the file your client gives you, you manually compress it using ffmpeg or some online tools to get it down
Same way we get a 1MB design from the Photoshop guy but to display on our website we reduce it to a 100kB webp first
Cape May WarblerOP
Thing is I gave them CMS so they can do it on their own, this website is basically one pager that won't be modified for next 2 years or so so I don't want to make errands for them, if they want to change hero section it's on their own
joulev
Hmm I see, compressing video is quite a bit of a technical task though so making them do it might not be easy, good luck
But for good ux still need to do it regardless, no websites can function with good ux if the assets are 77MB heavy
With good internet it’ll still take significant time to download that whole 77MB
Imagine users with bad internet they may just go away before the video is downloaded even halfway
Cape May WarblerOP
Yeah, I'm aware, they are not completely not technical, it's just they are not aware of that and will easily forget. I'll send them two tools, one to compress and the other one to convert from mp4 to webm, I got from 88MB (my bad, it wasnt 77) to 6-7MB without loosing much on the quality side so it's definitely possible. I'm shrinking it down until I get something that loads relatively fast on throttle 3G