html5 video backgrounds... how to compress it the best way?

I have a video background… it’s a mp4 at 24mb playing for 26 seconds. I feel 24 mb is too much, but I don’t want to lose to much quality. I see nice sites with high quality videos that seems to load almost instantly all the time, what is the secret?

Thats done with software. Download Handbrake. Under presets use “normal”. And click web optimized. That will enable the movie to stream quickly and not have to download prior. In a nut shell that is it. Or you could watch 150 people on the web all say different versions of whats the best presets for optimized video in handbrake as I did.

Edit. Of course the size of your video matters too. Web streaming should prob not be any bigger than 720p.

And you could always make it very simple and just youtube or venimo embed the video. However I found video quality took a hit doing that.

1 Like

Thanks downloaded handbrake and it seems like a good program. Aha so the web optimized option makes the video play instantly, not having to look a a poster image for 20 secs before the video starts playing?

I got my video down to 5mb, without loosing to much quality, still pretty crisp, had to shorten it a bit tho. Is 5mb ok you think?

Sounds good to me.

My mp4 and m4v on my site are 20 mb. And the swf and ogg are 120mb. When I tested them they all streamed fine down to 2 bars on my iPhone.

Remember that this is just a decorative background (presumably) so that’s 5mb of (pointless) decoration. Ideally this would never be done. If possible, I’d go for an animated gif, or perhaps and animated SVG background.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.