Jump to content

HTML5 Video optimisation


gebeer
 Share

Recommended Posts

Hi all,

I was playing around with background video clipped by text to get a nice text effect like https://codepen.io/gebeer/live/wvxweZX 

In that process I was brushing up knowledge about best compression options for html5 video and came across this very concise article that sums it all up: https://www.kaels-kabbage.com/posts/html5-video-and-images-for-web/

The video in my codepen is 1920x188px 30 seconds at 30fps. The results I got with h264 codec are already pretty good. But with AV1 it is much better.

Comparison:

original uncompressed: 3.2MB
h264 codec: 568KB
AV1 codec: 258KB

I used Handbrake (ffmpeg) for encoding. For comparison I also tried several cloud services and found https://convertio.co/av1-converter/ to be the most versatile.

  • Like 7
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...