How to implement ScrollMagic videos to start on iPhone

Question

I built my website which has 3 videos with scrollmagic. It works perfectly on pc, android, and iPad (in Safari too). But these videos does not start on my iPhone. I tried Safari and Chrome. I also requested website view. It still doesn't work.

const controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
      duration: 40,
      triggerElement: v1,
      triggerHook: 0,
   })
   .setPin(v1)
   .addTo(controller);
let scene2 = new ScrollMagic.Scene({
      duration: 120,
      triggerElement: v1,
      triggerHook: 0,
   })
   .addTo(controller);
let scene3 = new ScrollMagic.Scene({
      duration: 60,
      triggerElement: v1,
      triggerHook: 0,
   })
   .addTo(controller);
let accelamount = 0.1;
let scrollpos = 0;
let delay = 0;
scene.on("update", e => {
   scrollpos = e.scrollPos / 500;
   //console.log(e);
})
setInterval(() => {
   delay += (scrollpos - delay) * accelamount;
   console.log(scrollpos);
   video1.currentTime = scrollpos;
   if (scrollpos > 2.5) {
      video2.currentTime = scrollpos - 2.5;
   }
   if (scrollpos > 4.5) {
      video3.currentTime = scrollpos - 4.5;
   }
}, 100);