HTML5 video autoplay not working in chrome

Question

I am trying to show a video in my slider using a html5 video. This works fine with the controls parameter (showing controls). But when I add autoplay it doesn't autoplay so I searched why that could be and found out chome only allows muted videos to autoplay.

So I added the muted parameter to it, but when I do that my entire video turns black and is still not autoplaying.

Why could that be?

My code:

<div class="r-slider-item">
    <video width="100%" height="100%" autoplay muted loop>
      <source src="assets/watertuin.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <div class="container">
      <div class="r-slider-top-content">
        <h1 class="animated fadeInDown">RESERVEER <span>NU</span></h1>
        <a href="#" class="btn btn-outlined animated fadeInUp"> Reserveren </a>
      </div>
    </div>
</div>

In Firefox and IE 11 it works just fine.

Answer 1

Ended up here because I was having the same issue (no mp4 autoplay in Chrome despite it working in Firefox & Safari). This is what fixed it for me:

$('#video')[0].load();

Hopefully this may help somebody else. My HTML:

<video id="video" class="video" autoplay muted loop>              
   <source id="video-src" src="img/video.mp4" type="video/mp4">
</video>

Answer 2

As per Google's latest policies, Muted videos can autoplay in Chrome. Autoplay with sound is allowed if:

• User has interacted with the domain (click, tap, etc.).
• On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
• On mobile, the user has [added the site to their home screen].

Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

Also, put the following tag after your <source> tag:-

<source src="assets/watertuin.ogg" type="video/ogg">

See, if it works now.

Check more about Google autoplay policy changes on:- https://developers.google.com/web/updates/2017/09/autoplay-policy-changes