CODEWITHSUNDEEP
htmlvideo
twan
twan

Reputation: 2659

HTML5 video autoplay not working in chrome

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.

Upvotes: 4

Views: 28998

Answers (4)

Kalebe Samuel
Kalebe Samuel

Reputation: 141

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>

Upvotes: 1

惠下柳下柳
惠下柳下柳

Reputation: 1

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;

Upvotes: 0

Sean Doherty
Sean Doherty

Reputation: 2378

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>

Upvotes: 3

Shashankk Shekar Chaturvedi
Shashankk Shekar Chaturvedi

Reputation: 435

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

Upvotes: 5

Related Questions