4

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.

1
  • See this Post They found a solution Commented Oct 16, 2018 at 8:10

4 Answers 4

5

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

9
  • I don't have an .ogg version of my video, but now I see another site I made a while back that used to work with an autoplay video also stopped autoplaying. Is there no way to autoplay on chrome? Seems weird they don't allow it even if the video is muted.
    – twan
    Commented Oct 16, 2018 at 7:53
  • Your code should work. Try adding it in JavaScript:- <script> document.getElementById('vid').play(); </script>. Try it in other browsers like Safari or Mozilla. If it still doesn't work in Chrome, check latest updates for your Chrome Commented Oct 16, 2018 at 8:01
  • The JS part didn't help. My Chrome is up to date I see so I have no idea why it is not working.
    – twan
    Commented Oct 16, 2018 at 8:09
  • In order to play in Chrome, I think, the file must be H.264 or WebM. Check this link:- developer.mozilla.org/en-US/docs/Web/HTML/…. Try if this works Commented Oct 16, 2018 at 8:17
  • I tried the javascript part again and noticed I didn't add id vid to my video tag, now it works! Thanks.
    – twan
    Commented Oct 16, 2018 at 8:27
3

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>
1
  • If it's muted I don't know why it was not loading before according to their policies...
    – MrMesees
    Commented Aug 19, 2020 at 8:14
1

You should use autoPlay and not autoplay.

use this code:

<video class="z-depth-1" autoPlay loop controls muted>
    <source src={YOUR_VIDEO_SOURCE} type="video/mp4" />
</video>
0

I having a method to make video autoplay without muting on Chrome. This method has two steps. Step one:Extracting audio for video file using javascript(Extracting audio from a video file); Step two:use AudioContext Api play the audio(it's extract for video file),and play the video on muted;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.