Optimized way of implementing Hero background Video
Does any of you have some experiencing with optimizing a video, which is played, in loop and with autoplay, the background of a website's hero?
It is currently quite large (around 10MB), which is clearly too much for a user to download, but it still needs to be of fairly good quality
Thank you in advance! 😊
269 Replies
might be useful to share stuff like resolution, which formats you've tried, how long the video is, fps of the video
Sorry, sure:
Resolution: 720 × 1280
FPS: 30
Duration: 29s
File-size: 10.6MB
Format: MP4 (WEBM lead to a 3x increase of file-size; it seems like it does not always reduce file-size)
I thought someone may already had to deal with a situation like this before.
I am mainly looking for an idea / impulse or direction I can head into, to solve this
Thanks for the guiding
what's the video codec?
did you made sure the video doesn't have a sound channel?
what's the video's contents? maybe it can be re-implemented in css
have you considered also not using a video, but just static images?
Oh yea, sorry, I forgot. The codec is: H.264; Colour-profile: HD (1-1-1)
That's the first thing I checked, it's always unnecessary files-size, since the video is muted anyways
that's my usual solution, however, in this case, a video is neccessary and images don't work either
well, you can try to reduce the video resolution, and apply some blur to it, depending on the contents of the video
if it is something like buildings and stuff, it won't matter much
it actually is a showreel of a room's interior :-/
I mean technically there could be a placeholder image of the first frame which is shown until the video finished downloading? but still, forcing the user to download a 10MB video is still quite harsh
well, i don't have a lot of other ideas, besides hosting it on youtube or something, when the visitor clicks to play
that's something you can already do
you can show the first non-black frame on a poster
I am just not too sure whether it is fine to have a 10MB file automatically download upon site visit
: The Video Embed element - HTML: HyperText Markup Language | MDN
The HTML element embeds a media player which supports video playback into the document. You can use for audio content as well, but the element may provide a more appropriate user experience.
check the example: it has a poster
if i were you, i wouldn't auto-download it, but only play it when the visitor presses a play button somewhere
Yes, I have to see. Thank you for your input. Codec etc. seems fine for a website though?
I see, that's already an improvement I guess. Thanks!
it's the most compatible option anyways
by the way, did you made that file yourself?
If you are able to transcode it, use a streaming video format like MPEG-DASH. Streaming formats do not need to download the whole video before it starts playing, so the size does not impact loading time of the page.
oh, yeah, mpeg-dash seems like a really good idea
No, it's actually an Instagram story
Ohh, how does it look compatibility-wise though?
None of the browsers have native support, but all of them except Opera Mini can play it if you have the appropriate library. This is the most common one: https://github.com/Dash-Industry-Forum/dash.js
GitHub
GitHub - Dash-Industry-Forum/dash.js: A reference client implementa...
A reference client implementation for the playback of MPEG DASH via Javascript and compliant browsers. - GitHub - Dash-Industry-Forum/dash.js: A reference client implementation for the playback of ...
i recommend you to contact the owner of the video and request the original file, so you can re-encode it yourself
And also verify that you have legal permission to use it.
^ that is extremely important
and get it in writting, not just a phone call
Thank you for the advocacy, but I am not that naive ;) I am building the site for a client and they just really want a showreel of their location on the page
I do have the original file, but it is just a video taken with an iPhone
that's way better than nothing
you can try to re-encode it into h265 as well,
I don't know if converting the codec to dash and thus introducing more javascript is a good idea though
h264, h265 and vp9 are your best options then
does h265 take up less space?
yes
I see, thank you!
usually
maybe lowering the framerate could work as well
I take all the small wins I can get
no, lower bitrate is better
you can go for the magical 23.97 fps too
both at the same time should be okay
Cloudflare has a video streaming option, I'm not 100% if it's free or not, but weve used it for clients at work and it works rapidly
that could be an option too
the question is how I can change the codec. does it even make a difference whether I have the original or not? I think I cannot just edit the codec of an iPhone video
yes, a lot
You could also look into creating a mobile version of the video to be served on smaller devices
I guess I'll give it a look
the 10MB version is actually the Instagram Reel format, so exactly that of a phone 😂
you can use something that does it for you, like cloudflare video or youtube or other video hosting service
or you can use a tool like handbrake or ffmpeg
Yes, HandBrake is best, that's what I was about to use
i wouldnt say "best" but it's an option
I guess if I use the original, instead of the Instagram version, I have the raw version without Instagram's modifications and shenanigans? Is that what you're aiming at?
no, you just have lower quality loss, and you can lower the bitrate for the same perceived quality
I see, thanks. Glad I can learn a thing or two, regarding videos
Theres a CLI program that is a lot better than handbrake, managed to turn 150MB+ videos into like 2 - 5MB
do you or did you work in a field where you had to work with videos a lot or how do you know all this? 😅 just curious
handbrake is easier to use
im just a web developer
performance or output size wise?
Both
well, I bet there are a lot of web developers who never even touched a video before
good, they shouldn't
it's horrible to do it yourself
Its called ffmpeg
may you be so kind to give me the name? 👀
nvm, haha
yeah, ffmpeg is amazing, but it's almost an art form to use it effectively
ffmpeg -i input.mp4 output.avi this is already worth installing itYeah, it will vary on what is in the video itself - a lot of high motion usually equates in a larger size as you lose a lot of info at lower file sizes
I used that ffmpeg for this client on the hero section https://vanfitsolutions.co.uk/
I don't have the slightest clue what VideoToolBox means, to be honest
honestly: me neither
i think it's the first time i hear that name
it's the name of the encoder
i would pick h264 (x264)
and then see whether h265 (x265) performs better file-size-wise I guess
Thanks
you're welcome
could constant framerate vs peak framerate (VFR) make a difference as well?
i don't know how it works, so, just try both
if it feels weird of something, just don't use that
the size actually went up by 50%
I feel like HandBrake is always just increasing file size, when it comes to this video
probably you have some setting enabled or something
or the resolution is wrong
or you're re-encoding the video
if I just drop the video in and instantly run it, without changing settings, it doubles
yeah, that's not how it works
I know, but how do I like reset the settings to the existing data of the video, so I can only change the ones I actually want to change 😅
well, that's a good question
what's the resolution of your video?
720 × 1280
that's the original video?
Yep
do you have vlc?
I don't, since I am mac, but I can quickly download it, if it helps :)
doesn't help a ton, but gives a lot of information
did you remove the audio track, in handbrake?
just as a head's up, h265 doesn't have very good browser support
Yes, of course
What about h264 though? Currently only tried that one
https://caniuse.com/hevc
h264 is pretty much 100%
it doesn't, but it's good to include it as an alternative
same as the horrible vp9
just saw, thank you
h264 also has really good hardware support, which is really great
I'll give it a shot then
the idea of using vlc is to check the file encoding information
im sure there's better ways, but that is a simple way of getting it
and then compare the handbrake generated with the original one I guess? I get it
not just that, but there could be some extra information in it
Thank y'all very much for your support and patience on this! It's nothing that can be taken for granted 😄
it isnt
but in the end, the easiest is to host it somewhere else
those platforms deal with this work for you
is this some sort of option you can open in vlc?
the menu on top should have an option called "media" > "codec information"
or something like that
ahh it's called "media information", it's under 'window' for mac
that should be it
so, try to keep the same fps
don't go for 30fps, or 60fps
and that's the HandBrake-modified one
the buffer dimentions are different 🤔
Framerate does not match though
yea, they are wrong. it's so weird
they are
i get it! the framerate isn't constant
try setting an average bitrate of about 4500 and enable 2 pass encoding (which probably takes a while and will look bad, but maybe you squeeze some space)
isn't this it?
it is
so I genuinely should have changed it
can you even do these sort of things in HandBrake?
Oh nvm
found it
Turbo first pass? Do we go all turbo 🐭
im telling you the equivalent of "flip all the knobs and see if it works"
gotcha boss
buffer dimensions are still wrong and file size is still larger than of the original
huh
interesting ...
i usually use it and have great results
specially the discord presets, to shrink down the videos to share in here
Hmm, this is so weird
I'll just use discord for my video compression from now on, all problems solved 👀
would you mind trying the same on your machine once? just to eliminate possible problem sources
don't think that discord re-compresses videos, but wouldn't be surprised if it did
i can try
I'll be sure to give it a look
thank you ❤️
well, i can reduce it quite a fair bit
copy these settings, and you can generate a 5.24mb version that's a bit artifacty in the first few seconds
this is what i got, from the downloaded video
how do you have so much better results? I am confused
if you don't mind losing fine details, then you can just go crazy and use 1000kbps instead
I don't mind
i started with the 1080p 30fps preset
It should just convey the mood
if you do that
this is what i got
you probably can go even lower
General > Fast 1080p30? me too
yup, that's it
is the last version you've sent using this already?
that's what I've been using as well, huh?
yes, the 3.50mb version
i made this one with 800kbps, but it looks pretty bad
I guess this is really the best we can do?
not really
im trying something
That's what I wanted to hear! 😄 You are a charm!
but honestly, i don't think i can do a lot better
without looking awful
i got this one
looks better than this one here
but i can't do a lot better
that one is 1000kbps
these are the settings ive used
this one is actually 1.2MB bigger than the previous one
yes, but looks much better and isn't pixelated
it isn't perfect, but eh
I see, I guess I'll see which one works better for me
Thank you so much for your help! You really helped me out a lot here. I wish you a lovely evening and I'll be sure to let you know how it worked out and how the finished product looks
Fox gang btw 🦊
thank you
lol
i tried to exporting as h265, but couldn't get better results
oh, could you try webm once please? for me it somehow trippled file size using HandBrake
last time I had to compress a video for the web it lowered file size, I thought it was more optimized. does seem like it is very much depending on the use-case
hardware encoding and decoding for it isn't that good
i used the settings you see there, and there was no space savings but kinda looks like the 5mb version ive sent
Thank you! Would you prioritize the WEBM source over the MP4 one, if WEBM is supported by the browser?
yes, i would, since it SEEMS to look better for the same file size
Thank you! You really helped me :)
Be sure to let me know if you ever need help on anything, not, video-related, and I am your man ;)
thank you, i will remember that
Just a heads up you can serve multiple sources and the browser will pick the one it has support for - I think it goes in inheritance order so place the WEBM first and then MP4, MOV, etc afterwards
Yea, that’s exactly what I did. Thanks for the heads up though :)
Is there a way to defer the loading of the video / load it async? At the moment, all other images and logos are taking a long while to load, as they only start loading once the video finished doing so, which is quite a while
Im not 100% sure about lazy loading - but we usually add a
preload attribute to it, which might help your situation. Also any images you have on the page that are not in immediate view you can add a loading="lazy" attribute which will make it so the images only start loading when they come in/close to viewwhat i would do is to, for example, take the first frame from the video and show it with a play button, on something.
then, swap that with a player with controls disabled, and just let it load
what
preload attribute value do you think of in this case?
that would be the optimal way of going about this for sureand it doesnt load the video unless it is needed
yea ._.
This is not possible without the use of js right?
no, because as soon as you put a video element, it start loading, if it has autoplay enabled
i was wrong
you can do it with pure css
you can also set it to only preload metadata with
preload="metadata"
the idea is simple:
checkbox unchecked:
- shows the label pointing to the video
- shows the image with the play button
checkbox checked:
- shows the video
- hides the label and image
the problem is that the video won't autoplayso you'd have to hit play twice?
otherwise you could just select the video through js and call the play function on button click right?
basically, yes
I think I even prefer the actual image tag over the poster; it gives more control over how you implement the placeholder image
it does, but the poster attribute has a huge advantage
instead of showing just a black background, it shows the image
OH MY i had an epiphany
instead of having that weird html, you can put the background image under the video
you can set some styles for the video player
with the preloading of metadata and stuff, it shouldnt use too much bandwidth, and hides the spinner
this way, you could have it work with just 1 tap
I see
but then I wouldn't need the overlayed image, would I?
on top? no. under it? probably not, if you massage it right
massage? ^^
so no custom play button?
you probably wont need, but test it
@epic2937 Somehow the video just disappears / turns invisible and does not start when you start it on a mobile device.
Have you ever had this happen? Can it be that mobile browsers just don't load videos of a certain size?
no, that is incredibly weird
if you have an android phone, that is super easy to debug
I think so too ^^
do you have an android phone?
if you have an iPhone and MacBook you can link them through Safari as well
or Xcode works as well I guess
as you might have already guessed, I don't have an android phone ;)
well, i cant afford that type of stuff
so, it may be a safari problem instead of a mobile page problem
could it be because of the encoding type?
webkit isnt as up-to-date as chrome
it doesn't work in any mobile browser, already tested them all
I know
if you linked the mp4 and webm, no
Checked the Network Tab in DevTools
Seems like it fails to properly load the video on mobile devices
the mp4
the server doesnt support byte ranges
oh, so it couldn't display the video anyways?
it cant load it at all
there are no error messages or something similar
there shouldnt be
idk what I should debug at this point
well where did the video go
just to confirm, extend the file list in the screenshot you sent
you mean the entire list of Network transfers?
Sources
good to know btw, thanks for that :)
nice, so what was it?
what was what? :0
the problem
idk, it is not fixed yet
small misunderstanding I assume
i meant the name column
ohh, now I finally understand you
tired me
its fine
Byte Range 0-1
thats the metadata
Ohh
sounds like a browser bug
so the actual, "full" video never downloads?
the way that the preload="metadata" works is that it tries to request just enough to get stuff like length of the video and others
but not the video itself
but it would have to be a bug which is shared by all browsers then
also this same bug occured before I added
preload="metadata"then it is a bug in your code
there is not much code to begin with though
you are sure it is not an issue with the video file itself?
mp4 doesnt have transparency, and i used the h264 encoder
so, no, it should t
you can try to load it in the browser yourself
just the video, on a new tab
the bug already existed without the custom button functionality
with just autoplay
i will check that code later, but try what i said
with just the following:
that's what I already did, and there is shows a couldn't load screen as well
and the webm?
it only offers me to download it
also both sources were greyed-out in the DevTools, whereas they are not on the computer
weird
very very very weird
exactly.. hmm
I mean the website is currently online at https://cafejohanna.vercel.app so feel free to test it on your android phone as well
I am not too sure what to test and where to look right now though
its working for me
Working on mine too
what doesn't work is the video stopping
What's not working for you? I recently was dealing with video optimization issues on Safari, so I may be able to help
The video shouldn’t stop, ever; there is no pausing functionality as of now
Huh?
So it seems to be an iOS issue, tested Firefox and safari so far. I think both are WebKit browsers on iOS right?
As soon as I play the video on either iOS Safari or iOS Firefox it just disappears / goes invisible without playing; seems like it doesn’t properly load the source?
On all other browsers and devices it works like a charm however
Did you try just using the mp4 source without the webm to see if that works? Safari doesn't support autoplay with webm
There is no autoplay involved though
This is outdated code
Sorry for the confusion ^^
It doesn’t work on iOS chrome either, just tested it
So it only works on Android and Computers
Really seems to be an iOS issue then?
Nw, I'm not sure honestly but yea it sounds like an iOS thing
Not sure how I can debug this
I think I am going to test if a different, not custom, video works, while also removing the webm source; so we can be sure whether the video or the code is the issue
@vince Do you maybe have a video you used for a similar use-case on a website yet, which worked on iOS browsers?
how do you autoplay 5.3MB videos on mobile?
multiple
I lazy load the videos and use the
poster attr to show an image while it loadsoh yea, mine is the largest contentful paint and above the fold, so that's why it doesn't work in my case
I'ma try your video now
lmk
your video worked
@epic2937 this means that the video is causing the issue
somehow the video has some information iOS browsers / devices cannot read?
I am so confused right now
the video should work fine, since ive simply re-encoded it with h264
but from "should" to actually working...
haha, I'ma test the original vs the compressed version of the video, to be 100% sure :)
try it
the uncompressed version of the video works :0
hmm
i think i might know what it is
i removed all metadata, and webkit is trying to load it
so what are you proposing? restore the metadata but keep the same bitrate and compression?
@epic2937 are you able to apply the exact same settings as you did to the most compressed mp4 and webm, but keep the metadata? my output videos still seem to be way bigger than yours, even after replicating your settings 1:1.
Would help me out a ton 🙂
But no stress, it can wait
i can in 3 hours
but you need to send the video again, i dont know where it is
but, this time, send it in a compressed file
alright, thank you! :)
oh yea, sure. here you go
what do you mean with "in a compressed file"?
zip folder
just in case discors is doing some fuckery
oh yea
can you test this?
I can and I will (:
it works! wooohoo!!
could you make me a webm with metadata included as well then? <3
so happy this finally worked out
give me a few minutes
sure, take your time
7zip put them together, and im too lazy to split them
wait
don't touch that
lmao
the file came out all fucked
i had to re-do it twice because i messed the settings
but this one looks like the previous webm I suppose?
oh gosh, that sounds horrible. thanks for all the effort :))
you're welcome
Hello @ἔρως, I hate to ask this again, but would you mind to throw those two videos into HandBrake with the same configuration again? There was much back and forth. Would be much appreciated! No pressure though. Please let me know if I can help you out with anything as well 😃
this is the best i can do with the 2nd video
it's too grainy, and handbrake makes a shitty flickery mess with it
same, but webm
this was pure hell... the top-right corner was always moving, so, these are pretty big
the top-right corner? 👀
Oh gosh, this sounds horrible. I hope I haven't caused you too much hassle
Thank you very much! They all look almost the same as the original 😄
they could look better, but considering it is for a phone, i think it is perfect
yes, at 1500kbps and below with the fast preset, the top-right corner was being "stuck" and flickered in weird ways
i had to pick the 2nd slowest preset, which makes the re-encoding go from a few seconds to almost 15 minutes
the landscape one is for the desktop view though
sounds like a nightmare lol
well, it still looks ok-ish... for desktop, just use the original
isn't it way too big for basically any device? I mean we are talkin' 30MB..
for a desktop, not really
more often than not it is in an unlimited connection
i can try to squeeze some more quality, if you want, but the video is too grainy
the video is autoplayed and lazily loaded, but that should not really matter right?
it does
so 30MB is indeed bad then?
I mean I don't really care how fast the video loads, as long as the poster is shown and the rest of the site isn't affected by it
well, it depends
honestly, for a desktop, i think that quality is more imporant
but you think it's technically fine to autoplay a 30MB video on desktop?
you download way bigger files from youtube
i will try to get it to half the size, or less
I try to get a less grainy video. I'll get back to you in a day or so. I think that will just make this whole thing easier. Thank you once again :)
they are not autoplay, to be fair, though
take your time
just try to get better light
also, try playing with the iso settings on the phone, and see which one looks better