Streaming live at 10am (PST)

Video compression size for short videos


#1

Tjena!

What's a good practice when it comes to compressing videos for a website?
I've got an approx 30 second long movie in .MOV format with a size of 61,2Mb. I've now compressed it to a .MP4 format using Handbrake and got it down to 45,2Mb. Can/should I go further down in size?

I'm thinking about using Google Drive to host the videos and use the native Video widget to display it. If it fail, I'll go YouTube to host it and show it via the native Video widget.

Thoughts?


#2

Hi Steven,

For videos you want to litteraly show, hosting them on Vimeo and/or Youtube is a good practice because you don't deal with the compression question and somehow let the watcher some possibilities.

For background videos, you can go 640x480 500 to 1000kbits/sec to keep it small. You can also try 320x240 and put a pattern grid on it.

As per your question, I often wonder what's the best answer to it. As it's about streaming the video, the final size can be big especially on long videos. What's important after all, and the most useful to "master", it the bitrate value. Always try to let one keyframe per second and only adjust the bitrate for quality, until you're satisfied with the quality.

A nice alternative to using the WF video widget with YT or Vimeo videos is to use Vimeo code snippet with a customized player (you can custom quite a lot of things).


#3

Thanks Vince for the response!
There will not be any background videos but maybe 2-3 videos with a maximum length of 90 seconds. That Vimeo-solution sound a bit interesting. I suppose you paste that customized player as an HTML embed then? What about responsiveness then?


#4

Yes for the HTML widget.

For responsiveness, hmm, that has to be tested. What happens on mobile anyway is the video playing fullscreen, apart from some cases where it plays in place on tablets.


#5

I found this: https://www.reembed.com

Seems like a cool way to customize your player that show your Youtube videos. However, I can't really figure out how to apply it to a Webflow site. Choosing to embed via HTML, there's no HTML to embed, just a Javascript.

This:

<script data-cfasync="false">
  (function(a,b,c,d,e){var f=a+"Q";b[a]=b[a]||{};b[a][d]=b[a][d]||function(){
  (b[f]=b[f]||[]).push(arguments)};a=c.getElementsByTagName(e)[0];c=c.createElement(e);c.async=1;
  c.src="//static.reembed.com/data/scripts/g_6079_b3f58d17f32327a135fc2e603a892175.js";
  a.parentNode.insertBefore(c,a)})("reEmbed",window,document,"setupPlaylist","script");
</script>

Using that option, If I'm right (I am just guessing now), it is suppose to work in a way that It will automatically find out that you'll have a YouTube video embedded on your site and apply the customized player on that. Which makes me think that this might only work with a native HTML-videoplayer and not the Webflow native player...?


#6

Again I'm not going to give you a straight answer but just what I do after years and years of dealing with videos on websites.

I always try to go Youtube or Vimeo and defend this solution with clients.

When for a reason or another we have to embed our own material, we go with a renoun player called Flow Player. If you're going to deal with code and settings, you'd better go with Flow Player. It's responsive, has tons of options, a great support, it's not going anywhere anytime soon, perfect results... and lots of dev already know how to deploy it. It's also kind of very cheap and the free tier allows for infinite testing: https://flowplayer.org/pricing/

And there's a forum, and a designer : https://flowplayer.org/designer/


#7