What is the best method for rendering 5 videos on autoplay on the same page

Design help Custom code
1

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.
This was my first attempt. It works but because I initialize 5 iframe players, there is a huge hit in performance. Score: 32 on Google Page Speed insights. Bottleneck: Javascript coming from the iframe and I think because multiple players are initialized

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

Thoughts?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

To make an embedded video autoplay , add “&autoplay=1” to the video’s embed code right after the video ID (the series of letters that follows " embed /"). Embedded videos that are autoplayed don’t increment video views. I also find solutions on stack over flow from which you can be have better understanding.
https://stackoverflow.com/questions/15199437/get-multiple-embedded-youtube-videos-to-play-automatically-in-sequence

3

Hi Naheed!
Thanks for the reply.
I’ve done embedded, but the challenge is on performance.

I picked the Lootie method after 3 video attemps. Don’t get me wrong THEY Work, but they gave me really bad performance, noticeable in my own computer and personal devices

4

The Lootie attempt was the best one. I highly recommend this method