background-video: using the <video/> tag, how to save performance for large video size?
I currently have a 471.9 MB .mp4 video in my local directory that I want to ultimate use for a background video for a portal landing page.
I"m bringing the video into my component like so:
Does anyone know of any tools I can use to allow me to use the video, but without the browser having to download 471.9MB in order for the page to load?
I was thinking maybe a way to remote host a video or something?
Any input is appreciated.
25 Replies
"portal" might imply something like a single machine or small number of machines that load this page and display it for people to interact with it in a store or something? Or is this a landing page for a website that people on the internet are going to visit?
if it's a kiosk type thing, then probably don't worry about it, it'll get cached. If it's an open-on-the-internet thing, you'll have to seriously reduce that video size somehow, or rethink using a video as a background
If I visited your site on a metered connection (on my phone for example) and found out you just ate 10% of my data cap for a background video, I'd be super pissed 🤣
lol I know I know. I just added it with the intent to possibly remote host it and embed a link or something like that.
I'm also reducing to 720p
RE: the 'portal'.. Portal may be a bad name for it. Approved customers (whose applications have already been approved are going to be sent a link via email, and the email link will send them to the 'login' page, where they'll be invited to create an account.
From there on, they'll be able to use their login info to get into a "portal" area where they can view their past transactions and make new reservations/purchases, or chaneg their profile infomation if needed, etc
that sounds very application-y, isn't a background video going to be distracting?
Or else I'll use it on the login screen instead
I've done some googling, there's people saying "no one is going to want to download a 20mb video", so like... 500 is just bonkers
the 720 version is now 63.9MB
that's only good in comparison with the original 500, really
but really I wanted to embed a link somehow so that data load it off-loaded to somewhere else and doesn't affect page load? Isn't that possible?
you can lazy load it maybe, but the page isn't going to look loaded without the video, once the video starts playing
like, it's going to be noticeable that the video loads in later
right that's why lazy loading does't really help
I swear I though you could upload the video to something, and then just embed a link to that or something
a CDN?
that's still going to have to load
it sounds like you're asking for the video to be loaded without having to load the video
lol
I am
I don't get it then. How do people manage to use background videos
they compress the everloving fuck out of them until they're 1 or 2mb
also, I've honestly never used a site where I've gone "Huh, cool background video, that really adds something to the usability of this website"
No I know, I'll just use one really. Probably I'll move it to the login screen. I would probs be too distracting for the actual home page. And I'm planning to put ina. pause tool too
so compression though is basically it
just consider shortening it and compressing it more. reducing the filesize to at the very highest 10MB would be my goal
gotcha okay
and remember to test on multiple browsers for codec support too
okay, codec support
oh, and don't forget to strip the audio out
right yea, I saw that mentioned to: https://www.gomasuga.com/blog/best-practices-for-html-background-videos
Masuga
Best Practices for HTML Background Video Optimization | Masuga
Background videos can make an impact on your users, but need to be properly optimized. This post covers the main aspects of background video optimization.
Do you know of a specific video editing tool you'd recommend to do this compression with, and possibly other adjustments like frame rate?
I'd probably do it with ffmpeg, but there's online tools too. No idea though, like I said, not a fan of background videos
If you're looking for a GUI, HandBrake has some useful presets.
Thank you, that made it super easy
Resolution does affect file size but not by much, what you want to play with is bit rate. Just be aware that low bit rate videos are most noticeable when dark, you can crunch light videos down to barely anything
Also, save the first frame of the video and if
navigator.connection.saveData is true then show the still frame but if false you can load the video. You could also just have the image as default and swap it to a video