Page with multiple videos at once - best way to do it?

I am building a page that has a large grid of blog posts thumbnails you can click. Each thumbnail is a short, looping video, to make the grid very “lively”.

Imagine something like this from YouTube and imagine each thumbnail is a video that is auto-playing (muted, no controls):

I am rendering the video player using the <VideoPlayer /> component from react-datocms library (I am using React and Next.js, by the way).
I followed this guide on how to do it the right way using Mux: A <VideoPlayer /> for everyone — DatoCMS

So my concern is:

  1. If each video is 10 seconds and the grid has 30 videos playing at the same time, that is 5 minutes of video streaming for just 1 page visit.
  2. The website will have at least 30.000 visits per month, resulting in more than 2500 hours of video streaming (at least!).
  3. While the extra cost for that many hours of video streaming is manageable, we would like to have a long term plan on how to avoid spending money like crazy on this, if the number of visits per month increases even more.

So what can we do? Is there another way we can serve these videos or think about rendering them? Or is it just how it is?

Just a thought: Would it make sense to serve the raw MP4 URL instead? The videos are ~10mb each. This would increase the bandwidth usage, but I have no idea if it will max out the whole 1TB included in the Professional Plan.

I am open for your inputs and suggestions. I am not afraid of paying for extra usage, I just want to make sure we are not doing anything stupid or wasting resources and money.

And one more question: When streaming videos with Mux it will count towards “video streaming” (the 150 hrs/mo included per month on Professional Plan), but will the same video streamed also count on the bandwidth usage?

Hey @jesper,

This is an interesting (and multi-part) question that I’ll try to break down into chunks :slight_smile:

First, just to get it out of the way:

No, it’s always one OR the other, not both. Basically, if a usage comes from mux.com it’s streaming minutes, and if it comes from datocms-assets.com it’s bandwidth. Mux is our video API/CDN partner.


Now, as to the main part of your question… a quick disclaimer that this is probably more a frontend optimization question than anything truly to do with DatoCMS or Mux (or any other video provider). I’d be happy to give you my opinion on this matter as a fellow dev, but it wouldn’t be an “official” DatoCMS suggested best practice or anything like that (it’s not something we’ve thoroughly investigated, made guides and examples for, etc). So please take the below with a grain of salt and check with your team or friends to see if it sounds reasonable :slight_smile:

IMHO only: You probably should NOT stream a bunch of tiny videos (even just for a few seconds each) all at once, whether from Mux or from datocms-assets. Not only would that severely impact your billing, it’s also going to be pretty bad UX, since you’re forcing all your viewers to download a bunch of videos all at once (if their browser would even allow autoplay videos like that). It would eat up your and their bandwidth pretty quickly, especially if you don’t downsample them (i.e. if you don’t end up using Mux and the video player component). I wouldn’t recommend that.

Instead, you can convert those videos to smaller animated thumbnail images first (like small gifs or webps). That would still use up some bandwidth (especially for animated gifs, which are horribly inefficient) but you can better control both their size and framerate and – importantly – cache the result in your frontend framework as an image. Like if you’re using Next & Vercel, the <Image/> component should be able to cache that and serve it directly from the same CDN your frontend’s hosted on, which would bypass your Dato billing altogether (beyond the initial fetch and subsequent invalidations, etc.)

To generate the animated thumbnails in the first place, you can use Mux for this: Get thumbnails and images from a video | Mux

For example, the video https://www.datocms-assets.com/119170/1726011086-5649209-uhd_3840_2160_25fps.mp4 can be transformed into the animated webp: https://image.mux.com/TYCjhwf02EupzElYr010001GVdhNJYJ7YO5c/animated.webp?start=0&end=3&fps=3 with just its Mux Playback ID and a few URL parameters. You can see more details on their documentation page I linked to above.

Then you can either download that result and upload it to your DatoCMS media library as a separate image, or just handle it on all the frontend and cache it with Next/Vercel instead.

Important: This is kind of an edge case for us, and I’m not sure how using the generated thumbnail image would be billed (as a regular streaming video, some fraction thereof, or something entirely different…?) I’ll find out for you and report back.

If you’d rather bypass the Mux cloud processing, you should be able to do this on your own local computers too, using ffmpeg or similar on the source videos. Random blog link: How to Make a GIF from a Video Using FFmpeg - Bannerbear

But hopefully the Mux animated thumbnails don’t cost too much. Let me get back to you on that front as soon as I can!

Thank you, Roger, this was very helpful. And I fully understand this is your opinion and input as a fellow developer and not the official DatoCMS guide.

The animated thumbnail from Mux is a good idea, especially because Mux supports WEBP format. We did experiment with GIF but the quality and file size was just not acceptable.
And loading that many videos at once didn’t feel right as well, so that’s why I reached out to you also. So thank you for helping this much, really appreciate it!

I’ll wait for your reply about how the animated thumbnails are charged, bandwidth or differently. That’s the only missing piece.

Thank you :slight_smile:

@jesper:

A bit of good news! We spoke to Mux about this (it wasn’t clear to us either), and apparently the animated thumbnails are currently free. So that should be cheaper than streaming actual videos :slight_smile: And it also seems like WebP support for Webkit/Safari has improved since I last checked, and they seem to play fine in Safari. Good news all around.

In my own non-scientific testing (just to make sure we’re not accidentally billing you for them somehow), the thumbnail doesn’t seem to incur any sort of usage from us at all (you can check in your own project usages).

As far as I know, they have no current plans to start charging for this feature, and hopefully it’ll stay that way (since you’d still pay them for the non-thumbnail video anyway, or rather, we pay them on your behalf).

In the meantime, if you notice anything amiss with the billing, please do let us know!

That’s great news, Roger. Amazing!

I will get started right away with the WebP thumbnails and will keep an eye on the usage statistics.

Thank you so much for all your help.

1 Like

No problem! Hope it works out.

FYI, Mux also just told us:

We do plan on eventually implementing [some sort of billing for this feature], but we’ll give plenty of heads up ahead of any changes. Whenever it does roll out it shouldn’t be a meaningful increase for “normal” usage, though.