1

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.

Redgar Pro
  • 51
  • 7

1 Answers1

0

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>
Nikola Lukic
  • 4,001
  • 6
  • 44
  • 75
  • So this video actually ended up frozen as well oddly – Redgar Pro May 15 '22 at 16:43
  • Even with the code snippet. Would it help to know that the front-end is built in Bootstrap? – Redgar Pro May 15 '22 at 16:44
  • Try to update chrome! – Nikola Lukic May 15 '22 at 16:46
  • For me, its already up to date! – Redgar Pro May 15 '22 at 16:47
  • Basic platform is HTML, JS, CSS all other are just frameworks , libs ... Do you use chrome or some other browser ? On lower level your problem can be connected with video encoder problems specially on older mashines. – Nikola Lukic May 15 '22 at 18:40
  • I use the latest browser update for Chrome on a modern computer. RTX 2070, i7 9700k – Redgar Pro May 15 '22 at 18:49
  • In that case you need to prepare more info about your source code, somebody on community will find it what is it ! Did your page need autoplay on load if not you can use first touch/click to load video with sound Take a look at https://stackoverflow.com/questions/32378805/mp4-video-in-html5-video-tag-not-playing-in-mobile-chrome-and-mobile-safari/42268108#42268108 – Nikola Lukic May 16 '22 at 08:22