MP4 视频设置为用户自动播放。 用常用的方法，还是不自动播放？

Question

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.

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.

Answer 1

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>