MP4 video set to autoplay for the users. Using commonly used methods, it still doesn't autoplay-CodePudding

Hello StackOverflow Community,

I am working on a website in which I want to display its features using a looped mp4 video.

Here is what I used to create this element:

<video width="1500" height="1000" autoplay loop muted playsinline>
              <source src="/assets/images/hero/videoexample.mp4" type="video/mp4" />
            </video>

When I did this, no matter what I changed, I would still get the below result:

It would never automatically play the video to then not allow it to be looped.

Any advice on what I should do would be greatly appreciated.

CodePudding user response：

Do you have any plugin in your browser that blocks the video from auto-playing and also can you check your browser console for any messages?.

Is this a live website hosted somewhere or a local one?

CodePudding user response：

Add event listener oncanplay.

Take a look inline example:

<video width="1500" height="1000" autoplay loop muted playsinline oncanplay="() => {
    this.muted = true;
    this.play();
}"
>
 <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>