Next.js Discord

Discord Forum

Splash page video (~11MB) – static file, streaming?

Answered
Nebelung posted this in #help-forum
Open in Discord
NebelungOP
Hi, I'm building an educational platform and plan to include a 30-second, 11MB video on a splash page accessible only to non-logged-in users. Ideally, this splash page will be statically rendered using Next.js and hosted on Vercel.

I have two questions:

1. If I serve the video file from an Cloudflare R2 (with "unlimited" bandwidth), will it be cached during the static build process and count towards Vercel's bandwidth usage? Or will it directly consume bandwidth from the Cloudflare R2 when users access the page?

2. Alternatively, would streaming the video be a better option for a 30-second splash page video, particularly to benefit users with slower internet connections? Or is streaming overkill for such a short video?

Thank you!
Answered by B33fb0n3
iirc r2 will be automatically served as CDN
View full answer

13 Replies

@Nebelung Hi, I'm building an educational platform and plan to include a 30-second, 11MB video on a splash page accessible only to non-logged-in users. Ideally, this splash page will be statically rendered using Next.js and hosted on Vercel. I have two questions: 1. If I serve the video file from an Cloudflare R2 (with "unlimited" bandwidth), will it be cached during the static build process and count towards Vercel's bandwidth usage? Or will it directly consume bandwidth from the Cloudflare R2 when users access the page? 2. Alternatively, would streaming the video be a better option for a 30-second splash page video, particularly to benefit users with slower internet connections? Or is streaming overkill for such a short video? Thank you!
To answer your questions:
1. S3 should only be used for saving files. Why? When you serve files thought s3 (of course that's possible) it will get expensive very fast. So use a CDN. If you want to stay at AWS for an CDN, then you can use cloudfront. Else I like to use Cloudflare or BunnyCDN. Both are nice. When serving it should s3 it wouldn't count towards vercel limits as it's not served thought vercel
2. Yes, you should stream the video. Imagine the user stays only 5 seconds on the page, then you only downloaded a chunk of the video instead of the full video.


Make sure you compress your video. Normally the quality stays the same but the file size is waaay smaller. For compressions I like to use: https://www.freeconvert.com/video-compressor
or instead of overcomplicating things, just upload to youtube and embed with iframe. Keep the visibility to only people with link
@@ts-ignore or instead of overcomplicating things, just upload to youtube and embed with iframe. Keep the visibility to only people with link
NebelungOP
thanks, I'll look into that option too. I'll have to see if I can get rid of all the features that come with embeding like yt logo, controls etc. The video is the main element on the page so I need to polish it as well as possible.
@@ts-ignore https://developers.google.com/youtube/player_parameters#Parameters
NebelungOP
It never came to my mind but I like the idea of serving it through an embed. thank you
@Nebelung thanks, I'll look into that option too. I'll have to see if I can get rid of all the features that come with embeding like yt logo, controls etc. The video is the main element on the page so I need to polish it as well as possible.
keep in mind the GDPR as well, as YT collects data from their users... So just autoplay it won't work. You need the clear acceptance from the user
Answer
@Nebelung what about it? i'll be the owner of the video, if that's what you mean
no, I mean that YT collected data from your users and you need an acceptance of the user to load YT. If you don't have the acceptance, then YT will collect data, but the user (your user) never accepted it. And that#s against GDPR

So yes, embedding it is easy and cheap, but need an acceptance as well
happy to help