3

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.

twan
  • 2,450
  • 10
  • 32
  • 92
  • See this [Post](https://stackoverflow.com/questions/17994666/video-auto-play-is-not-working-in-safari-and-chrome-desktop-browser) They found a solution – Thomas Neveu Oct 16 '18 at 08:10

4 Answers4

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

Shashankk Shekar Chaturvedi
  • 435
  • 5
  • 18
  • 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 Oct 16 '18 at 07:53
  • Your code should work. Try adding it in JavaScript:- . Try it in other browsers like Safari or Mozilla. If it still doesn't work in Chrome, check latest updates for your Chrome – Shashankk Shekar Chaturvedi Oct 16 '18 at 08: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 Oct 16 '18 at 08:09
  • In order to play in Chrome, I think, the file must be H.264 or WebM. Check this link:- https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats. Try if this works – Shashankk Shekar Chaturvedi Oct 16 '18 at 08:17
  • I tried the javascript part again and noticed I didn't add `id` vid to my video tag, now it works! Thanks. – twan Oct 16 '18 at 08:27
  • Good to hear that. – Shashankk Shekar Chaturvedi Oct 16 '18 at 08:28
  • I have one question, If autoplay videos are muted, then how youtube videos are playing with unmuted? Please help/explain. Thanks – Ranjit Kumar Jan 02 '19 at 07:05
  • Hi, You can autoplay videos only if they are muted. As per Autoplay Policy Changes by Google, you cannot autoplay a video with sound. For that, you must include controls in your video so, if a user wants to hear the sound from your video, he can click the sound button. In Facebook too, you will not see video autoplay with sound, there is an option to enable sound. Same is the case with Youtube. When a video ad pops up, it auto-plays muted and it's up to the user to decide enabling of sound. In your case, either the browser might be old or you might have enabled the sound which applies for all. – Shashankk Shekar Chaturvedi Jan 02 '19 at 10:36
  • To know more about the Autoplay Policy Changes by Google, visit the following link:- https://developers.google.com/web/updates/2017/09/autoplay-policy-changes – Shashankk Shekar Chaturvedi Jan 02 '19 at 10:36
2

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>
Sean Doherty
  • 2,273
  • 1
  • 13
  • 20
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>
Kalebe Samuel
  • 111
  • 1
  • 5
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;

惠下柳下柳
  • 1
  • 1