Next.js Discord

Discord Forum

Are videos also optimized automatically in nextjs?

Unanswered
Dwarf Crocodile posted this in #help-forum
Open in Discord
Dwarf CrocodileOP
I have put a 20mb video in my hero section.
I saw somewhere that video will be served from Vercel's CDN automatically when I deploy it. But it loads really slow.

<video
            ref={videoRef}
            className={`object-cover w-full h-full min-h-screen transition-opacity duration-500 ease-in-out ${
              isVideoLoaded ? "opacity-100" : "opacity-0"
            }`}
            src="/landing/1.mp4"
            autoPlay
            loop
            muted
            playsInline
            preload="auto"
            onLoadedData={handleVideoLoad}
            onError={(e) => console.error("Video loading error:", e)}
          />

5 Replies

joulev
CDN or not 20MB is still too large. No nextjs doesn’t compress it for you. You need to manually optimise the file size yourself
@joulev CDN or not 20MB is still too large. No nextjs doesn’t compress it for you. You need to manually optimise the file size yourself
Dwarf CrocodileOP
any free CDN where i put the video and just use the link in my Frontend?
@Dwarf Crocodile any free CDN where i put the video and just use the link in my Frontend?
joulev
No matter what cdn I tell you, you will still not see any perf improvements because 20 MB is too large. For a user with bad internet, say 8 Mbps, it would take them 20 seconds to download the video.

Compress the video.
Original message was deleted
joulev
The trick to video loading performance is not where you host it, it is what tactic you use to load it