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

user_13609376 0
Viewed 62

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:

Issue with autoplay

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

This website is built on: HTML, JS, SCSS, CSS, and Primarily Bootstrap. I hope this information helps.

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

video html javascript
1 Answers

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>

user_15131870
Related