Video autoplay is not working in mobile view

sruthi — Thu, 08 Aug 2024 13:37:42 +0000

i am creating a project in angular and typescript. i have a video in homepage which ,the client have requirement to play without interaction and even if the video goes out of window viewport it has to play. so i added an interval function in ts file like;

ngAfterViewInit(): void {
const video = this.myVideo.nativeElement;
this.playCheckInterval = setInterval(() => {
// console.log('Video element:', video.paused);

  if (video.paused) {
    video.play(); // Ensure the video keeps playing
  }
}, 250); // Check every second (adjust as needed)

}

ngOnDestroy(): void {
if (this.playCheckInterval) {
clearInterval(this.playCheckInterval); // Clear the interval on component destroy
}
}
html

        <video #myVideo id="myVideo" style="width: 100%; height: auto;" class="video d-none d-md-block d-lg-block"
            preload="auto" autoplay [muted]="true" loop playsinline
            poster="https://ik.imagekit.io/7mkjuzyn8/assets/Academy/Redesign-Booking-Flow/vide-bg.jpg"
            controlsList="nofullscreen">
            <source src="https://ik.imagekit/mia-desktop.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>

        <video #myVideo id="myVideo" style="width: 100%; height: auto;" class="video d-block d-md-none d-lg-none"
            preload="auto" autoplay="autoplay" [muted]="true" loop="loop" playsinline poster=""
            controlsList="nofullscreen">
            <source src="https://ik.imagekit/mia-mobile.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>

desktop it is playing but mobile is not auto playing. how can i achieve this?

Forem: sruthi

Video autoplay is not working in mobile view