HTML5 Video Autoplay not working correctly

Question

I'm using this code:

<video width="440px" loop="true" autoplay="true" controls>
<source src="http://www.example.com/CorporateVideo.mp4" type="video/mp4" />
<source src="http://www.example.com/CorporateVideo.ogv" type="video/ogv" />
<source src="http://www.example.com/CorporateVideo.webm" type="video/webm" />
</video>

I want the video to autoplay but when the page loads the video doesn't play. It looks like it's a buffering issue, as when I hover on the video (to show controls) the video is always 2 seconds in but then stops and doesn't continue.

Note: I just visited the site again and autoplay seemed to work, but when I try again the same issue is happening, is this a buffering issue? Anything I can do to stop this?

score 63 · Answer 1 · answered May 05 '20 at 20:08

63

Chrome does not allow autoplay if the video is not muted. Try using this:

<video width="440px" loop="true" autoplay="autoplay" controls muted>
  <source src="http://www.tuscorlloyds.com/CorporateVideo.mp4" type="video/mp4" />
  <source src="http://www.tuscorlloyds.com/CorporateVideo.ogv" type="video/ogv" />
  <source src="http://www.tuscorlloyds.com/CorporateVideo.webm" type="video/webm" />
</video>

answered May 05 '20 at 20:08

StefanP

695
5
7

nice, its work for me – core114 Jul 03 '23 at 03:26

score 58 · Accepted Answer · answered Jun 07 '13 at 02:26

58

Try autoplay="autoplay" instead of the "true" value. That's the documented way to enable autoplay. That sounds weirdly redundant, I know.

answered Jun 07 '13 at 02:26

Multimedia Mike

12,660
5
46
62

use this snippet its cross browser compatile - I have tested this its working perfecly https://stackoverflow.com/questions/25848236/html-video-autoplay-not-working-in-firefox/45869587#45869587a – Asad Ali Aug 24 '17 at 19:36

Adorjan Princz · Answer 3 · 2017-03-01T10:15:02.473

31

Mobile browsers generally ignore this attribute to prevent consuming data until user explicitly starts the download.

UPDATE: newer version of mobile browser on Android and iOS do support autoplay function. But it only works if the video is muted or has no audio channel:

Some additional info: https://webkit.org/blog/6784/new-video-policies-for-ios/

edited Mar 01 '17 at 10:15

answered Sep 26 '14 at 12:31

Adorjan Princz

11,708
3
34
25

1

So how can one force autoplay for mobiles ? – Obmerk Kronen Feb 25 '17 at 03:20
Just use it like a simple attribute: – Adorjan Princz Mar 24 '17 at 20:10
And we must use the muted attribute , correct ? - it is working very sporadically ( for my tests at least ) depending on phone model / browser – Obmerk Kronen Apr 03 '17 at 11:56
2

Yes, that's right, if the video has audio channel then muted attribute is necessary: – Adorjan Princz Apr 12 '17 at 19:43
1

my findings are 'muted' works even with audio channels: http://curious-electric.com/pens/video/ – dirkk0 Aug 26 '17 at 15:34

mate.gvo · Answer 4 · 2019-11-14T08:28:32.573

8

Working solution October 2018, for videos including audio channel

 $(document).ready(function() {
     $('video').prop('muted',true).play()
 });

Have a look at another of mine, more in-depth answer: https://stackoverflow.com/a/57723549/3049675

edited Nov 14 '19 at 08:28

answered Oct 26 '18 at 08:25

mate.gvo

1,093
14
20

2

`$('video').attr('data-keepplaying', '')` is unnecessary. The `muted` property is the important part. – thirdender Nov 26 '18 at 19:27

score 1 · Answer 5 · answered Sep 29 '22 at 16:43

1

Just use it: autoplay controls muted

answered Sep 29 '22 at 16:43

Rimon Mahamud Rony

11
1

score 0 · Answer 6 · answered Feb 18 '20 at 23:29

html {
  padding: 20px 0;
  background-color: #efefef;
}

body {
  width: 400px;
  padding: 40px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

video {
  width: 400px;
  display: block;
}

<video onloadeddata="this.play();this.muted=false;" poster="https://durian.blender.org/wp-content/themes/durian/images/void.png" playsinline loop muted controls>
    <source src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4" />
    Your browser does not support the video tag or the file format of this video.
</video>

score -2 · Answer 7 · edited Feb 25 '22 at 15:47

-2

You might want to add some scripts if your software doesn't support jQuery or giving any reference type error.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
//Use above scripts only if the software you are working on doesn't support jQuery.

<script>
      $(document).ready(function() {

//Change the location of your mp3 or any music file. 
        var source = "../Assets/music.mp3";
    
        var audio = new Audio();
        audio.src = source;
        audio.autoplay = true;
      });
    </script>

edited Feb 25 '22 at 15:47

Dharman

30,962
25
85
135

answered Jan 30 '20 at 06:32

Alankrita Sharma

1
1

2

Please consider [edit]ing your answer to add some explanation and details. While it might answer the question, just adding some code does not help OP or future community members understand the issue or solution. – hongsy Jan 30 '20 at 07:24

HTML5 Video Autoplay not working correctly

7 Answers7

Linked