On this website I am trying to check the best method to achieve this result:
*include 5 short animations of Adobe XD prototypes
*no controls, autoplay on scroll
*the quality should be as crisp as apple.com
*decent performance on Google Page Speed insights
Method 1: Vimeo Iframe.
Method 2: Cloudinary html 5 video
No JS errors, clean play but since the video was captured in 4K it is choking the browser. It crashes the whole page in mobile just after you visit the page.
Method 3: Cloudinary player
After some custom code so far this worked best for all performance in general. But it’s giving LOTS of JS errors from their player and choking Google Page Speeds insights. Sometimes I get score 32, sometimes I get “?” can’t get any reports
Isolated code: https://codepen.io/danielvianna/pen/mdPPEyK
Method 4: Lootie
I just started on this method but I still don’t know how it works. I will try to recreate the videos in after effects which I used auto animate in XD then animate my comps via Lootie. Since I don’t have any footage with lots of frames, my understanding that serving static SVGs with loose to make the transitions of moving things around would have much less bandwidth consumption and performance