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.
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>