HTML5 Video Autoplay not working correctly

I'm using this code:

<video width="440px" loop="true" autoplay="true" controls> <source src="" type="video/mp4" /> <source src="" type="video/ogv" /> <source src="" 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?

6 Answers

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

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="" type="video/mp4" /> <source src="" type="video/ogv" /> <source src="" type="video/webm" /> </video> 

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:

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:

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="" playsinline loop muted controls> <source src="" type="video/mp4" /> Your browser does not support the video tag or the file format of this video. </video>

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

<script src=""></script> <script src=""></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>