Video autoplay is not working in mobile view

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?

Comments

[William]

You don't need to do this with js. Videos don't pause after leaving viewport.

Simply add this to your <video> element.

autoplay="true" loop="true" muted="true" playsinline

I've had issues with mobile not autoplaying videos before, you need the 'playsinline' tag for it to autoplay on Safari / iPhone. Also in general you need videos to be muted for autoplay to work.

[sruthi]

i added my current html code. it is in angular ts script. but still not working

[William]

You have the muted attribute in square brackets? Is that required for angular? I'd remove these and see if that works.

Not [muted]

You want muted

[sruthi]

i changed that , still no effect on mobile view.

[William]

Hmmm not sure what to suggest then.

I've looked at a website I have with an autoplaying video, it works on iPhone 13 Safari.

Code is as follows:

<video src="./hero_whitebg.mp4" playsinline autoplay muted loop></video>

Maybe try that as a starting point, change the video src to what you need it to be and go from there?

[GreenerSoft]

Normally, it's impossible to autoplay a video on a cell phone, and fortunately so!
It's a very bad practice, and the client needs to be made aware of it.