Hey @jesper,
This is an interesting (and multi-part) question that Iâll try to break down into chunks
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
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!